/* ==========================================================================
   emplois.co — maquette HTML
   Feuille de style unique. Mobile d'abord, points de rupture : 640 / 768 / 1024 / 1280.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
  /* Deux polices : Space Grotesk pour les titres et les chiffres, DM Sans pour le texte */
  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Neutres */
  --ink: #0c0d12;
  --ink-2: #2e3340;
  --muted: #5d6472;
  --line: #e6e8ee;
  --line-strong: #d3d7e0;
  --line-hover: #b9bfcb;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;

  /* Marque : rouge imposé #DD0000 (logo et titres du site actuel) */
  --primary: #dd0000;
  --primary-hover: #b90000;
  --primary-tint: #fff1f0;
  --primary-tint-2: #ffd8d4;
  --deep: #a00000;
  --deep-2: #1a1516;

  /* États */
  --danger: #b42318;
  --danger-tint: #fef3f2;
  --danger-line: #fecdca;
  --success: #067647;
  --success-tint: #ecfdf3;
  --success-line: #abefc6;
  --warning: #b54708;
  --warning-tint: #fffaeb;
  --warning-line: #fedf89;
  --info: #175cd3;
  --info-tint: #eff8ff;
  --info-line: #b2ddff;
  --new-bg: #fff4d6;
  --new-ink: #8a4a00;

  /* Formes : coins généreux, boutons en pastille */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(12, 13, 18, 0.05);
  --shadow: 0 10px 30px -12px rgba(12, 13, 18, 0.16), 0 2px 6px -2px rgba(12, 13, 18, 0.05);
  --shadow-lg: 0 30px 70px -28px rgba(12, 13, 18, 0.32), 0 6px 16px -8px rgba(12, 13, 18, 0.1);
  --ring: 0 0 0 2px #fff, 0 0 0 4px var(--primary); /* focus : anneau plein, contraste 3:1 (test v8, D1) */

  /* Mise en page */
  --container: 1240px;
  --gutter: 16px;
  --header-h: 72px;
  --section: 56px;

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 160ms;
  --base: 220ms;

  /* Superpositions */
  --z-sticky: 20;
  --z-header: 40;
  --z-bar: 50;
  --z-overlay: 90;
  --z-cookie: 100;
  --z-mock: 1000;

  /* Quadrillage léger (héros, tuiles, bandeau recruteurs) */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 .5H.5V48' fill='none' stroke='%230c0d12' stroke-opacity='.05'/%3E%3C/svg%3E");
  --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 .5H.5V48' fill='none' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section: 88px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); letter-spacing: -0.035em; }
h3 { font-size: 1.125rem; }
p { margin: 0; }

a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

::selection { background: var(--primary-tint-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: calc(var(--z-mock) + 1);
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

[hidden] { display: none !important; }

/* ---------- 3. Mise en page ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }
.container--prose { max-width: 860px; }

/* Haut de chaque page : le halo rouge de l'accueil, très léger */
#contenu { background: radial-gradient(560px 360px at 90% 0%, rgba(255, 92, 70, 0.12), transparent 70%) no-repeat, radial-gradient(640px 400px at 6% 0%, rgba(255, 196, 160, 0.24), transparent 70%) no-repeat; }

.section { padding-block: var(--section); }
.section--tight { padding-block: 32px; }
.section--white { background: var(--surface); border-block: 1px solid var(--line); }
/* Deux sections de même fond qui se suivent : un seul espacement entre elles, pas deux */
.section:not(.section--white) + .section:not(.section--white) { padding-top: 0; }

.section__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 12px 32px; margin-bottom: 32px;
}
.section__title { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem); letter-spacing: -0.04em; }
/* Titre de section secondaire (offres similaires de la fiche) */
.section__title--sm { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.section__sub { color: var(--muted); margin-top: 8px; font-size: 1.0625rem; }
.section__link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none;
  min-height: 44px;
}
.section__link .icon { transition: transform var(--fast) var(--ease); }
.section__link:hover .icon { transform: translateX(3px); }

.layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.layout-sidebar > * { min-width: 0; }
@media (min-width: 1024px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
  .layout-sidebar--wide-aside { grid-template-columns: minmax(0, 1fr) 360px; }
}

.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }

.grid { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.text-muted { color: var(--muted); }
.text-sm { font-size: 0.875rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

@media (max-width: 1023.98px) { .hide-mobile { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }

/* ---------- 4. Icônes ---------- */
.icon {
  width: 20px; height: 20px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon--brand { fill: currentColor; stroke: none; }

/* ---------- 5. Boutons ---------- */
.btn {
  --btn-bg: var(--surface); --btn-ink: var(--ink); --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--btn-line); border-radius: var(--radius-full);
  background: var(--btn-bg); color: var(--btn-ink);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { color: var(--btn-ink); border-color: var(--ink-2); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Pas de halo rouge sous le bouton : la couleur suffit à le désigner comme l'action principale */
.btn--primary { --btn-bg: var(--primary); --btn-ink: #fff; --btn-line: var(--primary); box-shadow: 0 1px 2px rgba(12, 13, 18, 0.08); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.btn--secondary { --btn-bg: var(--surface); --btn-ink: var(--ink); --btn-line: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }

.btn--dark { --btn-bg: var(--ink); --btn-ink: #fff; --btn-line: var(--ink); }
.btn--dark:hover { background: #000; border-color: #000; color: #fff; }

.btn--light { --btn-bg: #fff; --btn-ink: var(--deep); --btn-line: #fff; }
.btn--light:hover { background: var(--primary-tint); border-color: var(--primary-tint); color: var(--deep); }

.btn--ghost { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); border-color: transparent; }

.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1rem; }
.btn--sm { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .spinner { display: inline-block; }

.spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-2);
  font-weight: 600; font-size: 0.9375rem;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn[aria-expanded="true"] { background: var(--primary-tint); color: var(--primary); }

.link-btn {
  padding: 0; border: 0; background: none; color: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- 6. Badges et étiquettes ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.badge--new { background: var(--new-bg); color: var(--new-ink); }
.badge--primary { background: var(--primary-tint); color: var(--primary); }
.badge--expired { background: var(--warning-tint); color: var(--warning); }
/* Statuts d'une offre dans l'espace entreprise : en ligne en vert, en attente de validation en bleu */
.badge--live { background: var(--success-tint); color: var(--success); }
.badge--pending { background: var(--info-tint); color: var(--info); }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px;
  border: 1px solid transparent; border-radius: var(--radius-full);
  background: rgba(12, 13, 18, 0.05); color: var(--ink-2);
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
/* Zone tactile de 44 px sans grossir la pastille : 4 px de part et d'autre, l'écart entre lignes est de 8 px */
.chip::after { content: ""; position: absolute; inset: -4px 0; }
.chip:hover { background: var(--ink); color: #fff; }
.chip--active { background: var(--primary-tint); border-color: var(--primary-tint-2); color: var(--primary); }
.chip--active .icon { width: 14px; height: 14px; }
.chip--active:hover { border-color: var(--primary); }

.count { font-variant-numeric: tabular-nums; }

/* ---------- 7. Formulaires ---------- */
/* Champs de 52 px, coins de 12 px, ombre très légère ; au focus, bordure et halo rouges comme la
   recherche de l'accueil. */
.field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-width: 0; }
.field + .field { margin-top: 24px; }
.field__label { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); }
.field__label .opt { font-weight: 400; color: var(--muted); }
.field__label .req { color: var(--primary); margin-left: 2px; }
.field__hint { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.field__hint .icon { display: inline; vertical-align: -3px; margin-right: 4px; }
.field__count { font-size: 0.8125rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.field__count.is-ok { color: var(--success); }
.field__error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.875rem; font-weight: 600; color: var(--danger);
}
.field__error .icon { margin-top: 2px; width: 16px; height: 16px; }

.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #8a909c; }
.input:hover, .select:hover, .textarea:hover { border-color: #b8bec9; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: rgba(221, 0, 0, 0.55); box-shadow: 0 0 0 4px rgba(221, 0, 0, 0.1); }
.textarea { min-height: 140px; padding: 14px 16px; border-radius: 14px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235d6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.input[readonly] { background: var(--surface-2); color: var(--ink-2); box-shadow: none; }

.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: color var(--fast) var(--ease); }
.input-icon:focus-within > .icon { color: var(--primary); }
.input-icon > .input, .input-icon > .select { padding-left: 46px; }

.field--error .input, .field--error .select, .field--error .textarea, .field--error .file-drop {
  border-color: var(--danger); background-color: var(--danger-tint);
}
.field--error .input:focus, .field--error .select:focus, .field--error .textarea:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.15); }

/* Sections : pastille numérotée et titre, description alignée sous le titre, filet entre deux sections */
.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fieldset + .fieldset { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
/* Deux groupes de choix qui se suivent (contrat, mode de travail) : simple espacement, sans filet de section */
.field.fieldset + .field.fieldset { margin-top: 24px; padding-top: 0; border-top: 0; }
/* Légende sortie du cadre (float) : le filet de séparation n'est plus coupé par le titre */
.fieldset__legend {
  float: left; width: 100%; display: flex; align-items: center; gap: 14px; padding: 0; margin: 0 0 6px;
  font-family: var(--display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink);
}
.fieldset__legend + * { clear: both; }
/* Section sans description : les champs ne collent pas au titre (la légende flotte, la marge se met sur elle) */
.fieldset__legend:has(+ :not(.fieldset__desc)) { margin-bottom: 22px; }
/* Badge à côté du titre d'une section (« Protégées contre les robots ») : passe à la ligne si la place manque */
.fieldset__legend:has(> .badge) { flex-wrap: wrap; row-gap: 8px; }
.fieldset__legend > .badge { font-family: var(--font); letter-spacing: 0; }
.fieldset__num {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px;
  background: var(--ink); color: #fff; font-family: var(--display); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0;
}
.fieldset__desc { margin-bottom: 24px; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 640px) { .fieldset__desc { margin-left: 50px; } }

.field-row { display: grid; gap: 24px 20px; }
.field-row > .field + .field { margin-top: 0; }
.field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: 24px; }
/* Éditeur des descriptions (theme.js, initEditeurs) : barre Gras / Italique / Listes au-dessus
   d'une zone éditable, avec le cadre et le focus des champs. */
.editeur { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-sm); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.editeur:hover { border-color: #b8bec9; }
.editeur:focus-within { border-color: rgba(221, 0, 0, 0.55); box-shadow: 0 0 0 4px rgba(221, 0, 0, 0.1); }
.field--error .editeur { border-color: var(--danger); background-color: var(--danger-tint); }
.editeur__barre { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.editeur__btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.editeur__btn:hover { background: var(--surface-2); color: var(--ink); }
.editeur__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.editeur__btn[aria-pressed="true"] { background: var(--primary-tint); color: var(--primary); }
.editeur__zone { padding: 14px 16px; font-size: 1rem; line-height: 1.6; color: var(--ink); outline: none; overflow-wrap: anywhere; }
.editeur__zone > :first-child { margin-top: 0; }
.editeur__zone p, .editeur__zone ul, .editeur__zone ol { margin: 0 0 0.6em; }
.editeur__zone ul, .editeur__zone ol, .apercu-texte ul, .apercu-texte ol, .company-about__text ul, .company-about__text ol { padding-left: 1.4em; }
.editeur.is-vide .editeur__zone::before { content: attr(data-placeholder); position: absolute; left: 16px; right: 16px; margin-top: 0; color: #8a909c; pointer-events: none; }
.apercu-texte p + p, .apercu-texte p + ul, .apercu-texte ul + p { margin-top: 0.6em; }
/* Champ logo du profil, enveloppé dans .profil-logo sur le site : même écart avant le champ suivant. */
.profil-logo + .field { margin-top: 24px; }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.checkbox { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 4px; cursor: pointer; }
.checkbox input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer;
}
.checkbox__text { font-size: 0.9375rem; }

/* Choix en pastilles (types de contrat) : compactes, 12 px sous le libellé ; 44 px de haut sur écran tactile */
.fieldset > legend.field__label { padding: 0 0 12px; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px 7px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface);
  font-size: 0.875rem; font-weight: 500; line-height: 1.2; color: var(--ink-2);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pill span::before {
  content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 4px;
  background: #fff center / 9px no-repeat; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pill:hover span { border-color: var(--ink-2); background: var(--surface-2); color: var(--ink); }
.pill input:checked + span { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.pill input:checked + span::before {
  border-color: var(--primary); background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* Choix unique (bouton radio) : rond, point blanc au centre une fois choisi */
.pill input[type="radio"]:checked + span::before { background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px); }
.pill input:focus-visible + span { box-shadow: var(--ring); }
@media (pointer: coarse) { .pill span { min-height: 44px; } }

/* Fichier */
.file-drop {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--bg); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.file-drop:hover, .file-drop:focus-within { border-color: var(--primary); background: var(--primary-tint); }
.file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop__icon {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm);
}
.file-drop__title { font-weight: 600; }
.file-drop__title u { color: var(--primary); text-underline-offset: 3px; }
.file-drop__meta { font-size: 0.8125rem; color: var(--muted); }

.file-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.file-item__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.file-item__body { flex: 1; min-width: 0; }
.file-item__name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item__meta { display: block; font-size: 0.8125rem; color: var(--muted); }
.file-item--ok .file-item__icon { background: var(--success-tint); color: var(--success); }

/* Bas de formulaire : bouton principal séparé du dernier champ par un filet */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.form-note { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--muted); }
.form-note .icon { color: var(--primary); margin-top: 2px; }

.required-legend { font-size: 0.8125rem; color: var(--muted); }
.required-legend .req { color: var(--primary); }
/* En tête de formulaire : la mention des champs obligatoires, séparée de la première section */
.form-card > .required-legend { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.form-card > .required-legend + .fieldset { margin-top: 0; }

/* Formulaire en blocs (publier, modifier une offre) : chaque section est une carte ; le bouton, hors carte,
   est suivi de sa note */
.form-card.form-blocs { padding: 0; background: none; border: 0; box-shadow: none; }
.form-blocs > .fieldset {
  padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.form-blocs > .fieldset + .fieldset { margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-blocs > .form-actions { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; padding-top: 0; border-top: 0; }
.form-blocs > .required-legend { margin: 0 0 12px; padding: 0; border: 0; }
.form-blocs > .alert { margin-bottom: 20px; }
.form-blocs > .alert + .required-legend { margin-top: 0; }
/* En-tête des cartes : numéro adouci (rond rose clair, chiffre rouge), pastille calée à droite,
   filet sous l'en-tête sur toute la largeur de la carte. */
.form-blocs > .fieldset > .fieldset__legend {
  width: calc(100% + 48px); margin: -6px -24px 20px; padding: 0 24px 14px; gap: 12px; border-bottom: 1px solid var(--line);
  font-size: 1.125rem;
}
.form-blocs .fieldset__num { width: 28px; height: 28px; border-radius: 999px; background: var(--primary-tint); color: var(--primary); font-size: 0.8125rem; }
.form-blocs .fieldset__legend > .badge { margin-left: auto; }
@media (min-width: 768px) {
  .form-blocs > .fieldset { padding: 32px 40px; }
  .form-blocs > .fieldset + .fieldset { padding-top: 32px; }
  .form-blocs > .fieldset > .fieldset__legend { width: calc(100% + 80px); margin: -10px -40px 24px; padding: 0 40px 16px; }
}

/* Indicateur de progression (téléversement) */
.progress { height: 8px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.progress__bar { height: 100%; border-radius: inherit; background: var(--primary); transition: width 300ms var(--ease); }
.progress-label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; }

/* ---------- 8. Messages ---------- */
.alert {
  --a-ink: var(--info); --a-bg: var(--info-tint); --a-line: var(--info-line);
  display: flex; gap: 12px; padding: 16px; border: 1px solid var(--a-line); border-left-width: 4px;
  border-radius: var(--radius); background: var(--a-bg); color: var(--ink);
}
.alert > .icon { color: var(--a-ink); margin-top: 1px; }
.alert__title { font-weight: 700; color: var(--a-ink); }
.alert__body { flex: 1; min-width: 0; }
.alert__body > * + * { margin-top: 4px; }
.alert__body ul { margin: 6px 0 0; padding-left: 20px; }
.alert__body li + li { margin-top: 2px; }
/* Récapitulatif d'erreurs : chaque lien vers un champ fait 44 px de haut */
.alert__body li:has(> a:only-child) + li { margin-top: 0; }
.alert__body li > a:only-child { display: inline-block; padding-block: 9px; }
.alert__body a:not(.btn) { color: var(--ink); font-weight: 600; }
.alert__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.alert--success { --a-ink: var(--success); --a-bg: var(--success-tint); --a-line: var(--success-line); }
.alert--danger { --a-ink: var(--danger); --a-bg: var(--danger-tint); --a-line: var(--danger-line); }
.alert--warning { --a-ink: var(--warning); --a-bg: var(--warning-tint); --a-line: var(--warning-line); }

/* Panneau de résultat (succès, confirmation) */
.result-panel { padding: 32px 20px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .result-panel { padding: 48px 40px; } }
.result-panel__icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--success-tint); color: var(--success);
}
.result-panel__icon .icon { width: 32px; height: 32px; }
.result-panel--danger .result-panel__icon { background: var(--danger-tint); color: var(--danger); }
.result-panel__title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.result-panel__text { max-width: 52ch; margin: 12px auto 0; color: var(--muted); }
.result-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

/* État vide */
.empty-state { padding: 32px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty-state__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.empty-state__title { font-size: 1.25rem; }
.empty-state__text { max-width: 52ch; margin: 8px auto 0; color: var(--muted); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }

/* ---------- 9. Barre de maquette (hors design) ---------- */
.mockbar {
  position: relative; z-index: var(--z-mock);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 8px var(--gutter); background: #3a4660; color: #e4e8ef;
  font-size: 0.8125rem; line-height: 1.3;
}
.mockbar a { color: #fff; font-weight: 600; text-decoration: none; }
.mockbar a:hover { text-decoration: underline; color: #fff; }
.mockbar__tag { padding: 2px 8px; border-radius: 4px; background: #ffd166; color: #1f2430; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6875rem; }
.mockbar__states { display: flex; flex-wrap: wrap; gap: 4px; }
.mockbar__btn {
  min-height: 30px; padding: 4px 10px; border: 1px solid #56627c; border-radius: 4px;
  background: transparent; color: #d8dce4; font-size: 0.8125rem; font-weight: 600;
}
.mockbar__btn:hover { border-color: #8a93a8; color: #fff; }
.mockbar__btn[aria-pressed="true"] { background: #ffd166; border-color: #ffd166; color: #1f2430; }

/* ---------- 10. En-tête ---------- */
/* Barre noire au-dessus du menu : nombre d'offres, accès à l'espace entreprise */
.topbar { background: var(--ink); color: #b9b7bf; font-size: 0.8125rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar__info { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.topbar__info strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.topbar__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff3a2e; box-shadow: 0 0 0 3px rgba(255, 58, 46, 0.25); }
.topbar__sep { color: #5d5b63; }
.topbar__links { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.topbar__links li + li { margin-left: 4px; padding-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.topbar__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color var(--fast) var(--ease); }
.topbar__links a:hover, .topbar__links a[aria-current="page"] { color: #ff9d92; }
.topbar__links .icon { width: 15px; height: 15px; }
@media (pointer: coarse) { .topbar__links a { min-height: 44px; } }
/* Mobile (moins de 640 px, pas la tablette) : barre noire cachée pour gagner de la place (02/11/2026).
   « Espace entreprise » reste dans le menu mobile. */
@media (max-width: 639.98px) { .topbar { display: none; } }

/* Mêmes règles que l'en-tête de l'accueil (accueil.html). Filet et ombre légère en permanence,
   l'ombre s'accentue au défilement. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(12, 13, 18, 0.04), 0 6px 16px -10px rgba(12, 13, 18, 0.12);
  backdrop-filter: saturate(1.6) blur(14px);
  transition: box-shadow var(--fast) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 2px rgba(12, 13, 18, 0.05), 0 12px 28px -14px rgba(12, 13, 18, 0.28); }
.site-header__inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; flex: none; }
.logo:hover { color: var(--ink); }
.logo__img { display: block; width: auto; height: 26px; }

.nav { display: none; }
.nav__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 48px; padding: 10px 16px;
  border: 0; border-radius: var(--radius-full); background: none;
  color: var(--ink-2); font-weight: 500; font-size: 0.9688rem; text-decoration: none; text-align: left;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__link:hover { background: var(--surface-2); color: var(--ink); }
.nav__link[aria-current="page"] { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.nav__link .icon--sm { transition: transform var(--fast) var(--ease); }
.nav__link[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.nav__link[aria-expanded="true"] .icon--sm { transform: rotate(180deg); }
.nav__mobile { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* « Emploi par ville » : villes, barre proportionnelle au nombre d'offres, nombre */
.menu-villes { padding: 6px 4px 8px 16px; }
.menu-villes__title { display: none; }
.menu-villes ul { margin: 0; padding: 0; list-style: none; }
.menu-villes a { display: grid; grid-template-columns: minmax(0, 1fr) 72px 28px; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; text-decoration: none; }
.menu-villes a:hover { background: var(--primary-tint); color: var(--primary); }
.menu-villes__bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.menu-villes__bar span { display: block; width: var(--part); height: 100%; border-radius: inherit; background: var(--primary); opacity: 0.75; }
.menu-villes .count { font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-align: right; }

.header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header__publier { display: none; }

/* Menu du compte (entreprise connectée seulement) : le logo de la société seul (le nom est lu par
   les lecteurs d'écran), puis un menu aligné à droite. Sur mobile, il s'ouvre en panneau sous l'en-tête. */
.compte__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: none;
}
.compte__btn .logo-box {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
/* Logo sur fond blanc ; sans logo, les initiales gardent leur couleur (.mono--a…f) */
.compte__btn .logo-box:not(.mono) { background: var(--surface); }
.compte__btn .logo-box:has(img) { padding: 3px; }
.compte__btn:hover .logo-box { border-color: var(--line-hover); }
.compte__btn[aria-expanded="true"] .logo-box { border-color: var(--ink-2); box-shadow: 0 0 0 3px var(--surface-2); }
.compte__btn:focus-visible { outline: none; }
.compte__btn:focus-visible .logo-box { box-shadow: var(--ring); border-color: var(--primary); }

.compte__menu {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); z-index: var(--z-header);
  padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.compte__tete { display: flex; align-items: center; gap: 12px; padding: 8px 8px 14px; border-bottom: 1px solid var(--line); }
.compte__tete > div { min-width: 0; }
.compte__tete .logo-box { width: 44px; height: 44px; }
.compte__societe { font-weight: 700; line-height: 1.3; color: var(--ink); }
.compte__email { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte__liens { margin: 6px 0 0; padding: 0; list-style: none; }
.compte__liens a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px;
  border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; text-decoration: none;
}
.compte__liens a .icon { color: var(--muted); }
.compte__liens a:hover { background: var(--surface-2); color: var(--ink); }
.compte__liens a:hover .icon { color: var(--ink); }
.compte__liens a[aria-current="page"] { background: var(--primary-tint); color: var(--primary); }
.compte__liens a[aria-current="page"] .icon { color: var(--primary); }
.compte__compteur { margin-left: auto; min-width: 24px; padding: 0 8px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.compte__pied { padding-top: 6px; border-top: 1px solid var(--line); }

@media (min-width: 1024px) {
  .compte { position: relative; margin-left: 4px; }
  .compte__menu { left: auto; right: 0; top: calc(100% + 12px); width: 300px; }
}

/* Mobile : la navigation devient un panneau sous l'en-tête, sur un fond assombri qui ferme le menu au toucher */
/* Le voile est posé sur body : l'en-tête a un backdrop-filter, qui piégerait un pseudo-élément fixe. */
body:has(.nav.is-open)::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background: rgba(12, 13, 18, 0.45); }
.nav__mobile { display: grid; gap: 4px; }
.nav__mobile .nav__link { justify-content: flex-start; gap: 10px; }
.nav__mobile .btn--block { margin-bottom: 8px; }
.nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px var(--gutter) 24px; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgba(12, 13, 18, 0.35);
}

@media (min-width: 1024px) {
  .nav { display: block; margin-left: 32px; }
  .nav__list { flex-direction: row; align-items: center; gap: 2px; }
  .nav__item { position: relative; }
  .nav__link { width: auto; min-height: 40px; padding: 8px 16px; }
  .nav__mobile { display: none; }
  .menu-villes { position: absolute; left: 0; top: calc(100% + 12px); width: 360px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
  .menu-villes__title { display: block; padding: 4px 12px 8px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
  .header__publier { display: inline-flex; margin-left: 4px; }
  .menu-toggle { display: none; }
}

/* ---------- 11. Fil d'Ariane ---------- */
.breadcrumb { padding-top: 20px; font-size: 0.875rem; }
.breadcrumb a, a.job-header__company-name, .meta-list dd a { position: relative; display: inline-block; }
/* Liens courts hors du texte courant : zone tactile de 44 px de haut sans changer la mise en page */
.breadcrumb a::after, a.job-header__company-name::after, .meta-list dd a::after { content: ""; position: absolute; inset: -11px -4px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.breadcrumb li + li::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb li { min-width: 0; }
.breadcrumb [aria-current="page"] { display: block; min-width: 0; max-width: 40ch; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sur mobile, la page courante est déjà le H1 : le fil d'Ariane s'arrête au niveau parent */
@media (max-width: 639.98px) { .breadcrumb li:has(> [aria-current="page"]) { display: none; } }

/* ---------- 12. Héros (accueil) ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: 40px 56px;
  background:
    radial-gradient(520px 380px at 88% 18%, rgba(255, 92, 70, 0.18), transparent 70%),
    radial-gradient(600px 400px at 8% 0%, rgba(255, 196, 160, 0.28), transparent 70%),
    var(--surface);
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--pattern); -webkit-mask-image: radial-gradient(80% 70% at 60% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(80% 70% at 60% 30%, #000 10%, transparent 75%); pointer-events: none; }
.hero > .container { position: relative; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 5px 14px 5px 8px;
  border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line);
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.hero__eyebrow .dot { width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint-2); }
.hero__title { max-width: 18ch; }
.hero__lead { max-width: 56ch; margin-top: 16px; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem); color: var(--muted); }
.hero__search { margin-top: 28px; }
.hero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.hero__popular-label { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.hero__stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.hero__stats li { font-size: 0.875rem; color: var(--muted); }
/* « Qui sommes-nous » : les 4 chiffres en grille régulière (2 colonnes sur mobile, 4 ensuite) */
.chiffres-cles .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
@media (min-width: 640px) { .chiffres-cles .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__stats strong { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
@media (min-width: 768px) { .hero { padding-block: 72px 88px; } }

/* ---------- 13. Formulaire de recherche ---------- */
/* Même barre que l'accueil : mots-clés, ville et bouton dans une pastille. Les libellés restent lus
   par les lecteurs d'écran (visually-hidden). */
.sf__bar { display: grid; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
/* Saisie en cours dans un champ (pas sur le bouton) : bordure et ombre rouges */
.sf__bar:has(.sf__input:focus, .sf__select:focus) { border-color: var(--primary); box-shadow: 0 0 0 5px rgba(221, 0, 0, 0.1), 0 36px 80px -30px rgba(221, 0, 0, 0.35), 0 8px 20px -10px rgba(12, 13, 18, 0.12); }
.sf__field { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 60px; padding: 0 16px 0 50px; border-radius: 18px; transition: background-color var(--fast) var(--ease); }
.sf__field:hover { background: var(--surface-2); }
.sf__field:focus-within { background: var(--primary-tint); }
.sf__field > .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.sf__field:focus-within > .icon { color: var(--primary); }
.sf__input, .sf__select { width: 100%; min-height: 60px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 500; outline: none; }
.sf__input::placeholder { color: #8a909c; font-weight: 400; }
/* « Tout le Maroc » (aucune ville choisie) : en gris, comme l'invite du champ de recherche */
.sf__select:has(option[value=""]:checked) { color: #8a909c; font-weight: 400; }
.sf__select { appearance: none; cursor: pointer; padding-right: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235d6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; }
/* Liste ouverte des selects (« select personnalisable », appearance: base-select) : arrondi,
   ombre, survol et option choisie aux couleurs du site. Amélioration progressive : seulement
   dans les navigateurs qui la gèrent (Chrome, Edge) et avec une souris ; ailleurs et sur mobile,
   la liste native du système reste, plus confortable au doigt. Clavier, lecteurs d'écran et
   envoi des formulaires restent ceux d'un vrai <select>. */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    .select, .sf__select, .select::picker(select), .sf__select::picker(select) { appearance: base-select; }
    /* Une seule ligne dans le champ fermé, centrée en hauteur comme le select natif. */
    .select, .sf__select { align-items: center; font: inherit; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf__select { font-weight: 500; }
    /* La flèche du site est déjà dessinée en image de fond. */
    .select::picker-icon, .sf__select::picker-icon { display: none; }
    .select::picker(select), .sf__select::picker(select) {
      margin-block: 6px; padding: 6px; max-height: min(360px, 60dvh); overflow-y: auto;
      border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
      box-shadow: var(--shadow-lg);
    }
    .sf__select::picker(select) { min-width: 220px; }
    .select option, .sf__select option {
      display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px;
      border-radius: 8px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; cursor: pointer;
    }
    .select option:hover, .sf__select option:hover, .select option:focus-visible, .sf__select option:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
    .select option:checked, .sf__select option:checked { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
    .select option::checkmark, .sf__select option::checkmark { order: 1; margin-left: auto; color: var(--primary); }
    /* Invite des champs de formulaire (« Choisir une ville ») : pas dans la liste, ce n'est pas
       un choix. Dans la recherche, « Tout le Maroc » en est un : il reste, en gris. */
    .select option[value=""] { display: none; }
    .sf__select option[value=""] { color: var(--muted); }
  }
}
.sf__submit { min-height: 56px; }
/* Option sous la barre de recherche (« Rechercher dans le titre uniquement ») */
.sf__option { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; margin-left: 30px; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); cursor: pointer; }
@media (min-width: 768px) {
  .sf__bar { grid-template-columns: minmax(0, 1.6fr) minmax(200px, 0.9fr) auto; align-items: center; border-radius: 999px; }
  .sf__field { border-radius: 999px; }
  .sf__field + .sf__field::before { content: ""; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
  .sf__field:hover::before, .sf__field:focus-within::before { opacity: 0; }
}


/* Listes, mobile : la recherche se replie derrière un résumé pour laisser les offres visibles */
.search-summary-bar {
  display: flex; align-items: center; min-height: 56px;
  border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-sm);
}
.search-summary-bar:has(.search-summary[aria-expanded="true"]) { border-color: var(--primary); }
.search-summary {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 54px; padding: 8px 8px 8px 16px;
  border: 0; border-radius: var(--radius-full); background: none; color: var(--ink-2); text-align: left;
}
.search-summary > .icon { color: var(--muted); }
.search-summary__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; }
.search-summary__text strong { color: var(--ink); }
/* « Modifier » : une icône crayon (02/11/2026), le texte reste pour les lecteurs d'écran */
.search-summary__action { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--primary); background: var(--primary-tint); }
/* Icône de la colonne « Secteurs et villes », séparée du résumé par un trait */
.search-summary-bar .aside-toggle {
  display: grid; place-items: center; flex: none; width: 52px; height: 36px; margin-right: 6px; padding: 0;
  border: 0; border-left: 1px solid var(--line); border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: none; color: var(--ink); cursor: pointer;
}
.search-summary-bar .aside-toggle[hidden] { display: none; }
.search-summary-bar + .search-collapse { margin-top: 12px; }
@media (min-width: 1024px) {
  .search-collapse[hidden] { display: block !important; }
  .search-summary-bar + .search-collapse { margin-top: 0; }
}

/* Deux blocs côte à côte (secteurs / entreprises) */
.split { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .split .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 14. Carte d'offre ---------- */
.job-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.job-list > li { display: flex; }
.job-list > li > .job-card { flex: 1; min-width: 0; }

/* Élément de liste : coins de 16 px (les panneaux de page gardent 24 px). Au survol, la bordure
   fonce et le titre passe au rouge, sans soulever la carte. */
.job-card {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; align-content: start;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease);
}
.job-card:hover { border-color: var(--line-hover); }
.job-card:has(.job-card__link:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.job-card__logo { grid-row: span 2; }
.job-card__top { display: flex; align-items: flex-start; gap: 8px; }
.job-card__title { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.job-card__link {
  color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.job-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.job-card__link:focus-visible { outline: none; }
.job-card:hover .job-card__link { color: var(--primary); }
.job-card__company { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.job-card__meta, .meta-row {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none;
  font-size: 0.875rem; color: var(--muted);
}
.job-card__meta { grid-column: 1 / -1; gap: 6px; margin-top: 10px; }
/* Lieu, contrat, date : pastilles grises, comme sur l'accueil */
.job-card__meta li { padding: 3px 10px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; }
.job-card__meta li .icon { width: 14px; height: 14px; }
.job-card__meta li, .meta-row li { display: inline-flex; align-items: center; gap: 6px; }
.job-card__meta .icon, .meta-row .icon { width: 16px; height: 16px; color: #8a909b; }
.job-card__excerpt {
  grid-column: 1 / -1; margin-top: 8px; font-size: 0.9375rem; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 640px) {
  .job-card { grid-template-columns: 56px minmax(0, 1fr); gap: 2px 18px; padding: 20px; }
  /* Le logo (56 px) s'étend sur titre, société et pastilles : un titre d'une ligne ne s'écarte plus de la société */
  .job-card__logo { grid-row: span 3; }
  .job-card__meta, .job-card__excerpt { grid-column: 2; }
}

/* Logo société ou monogramme : boîte de taille fixe, sans décalage de mise en page */
.logo-box {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; overflow: hidden;
  border: 0; border-radius: 12px; background: var(--surface-2);
}
/* Marge sur la boîte, pas sur l'image : l'image garde ses propres coins arrondis de 12 px. */
.logo-box:has(img) { padding: 4px; }
.logo-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
@media (min-width: 640px) { .job-card .logo-box { width: 56px; height: 56px; } }
.logo-box--lg { width: 64px; height: 64px; border-radius: var(--radius); }
.logo-box--xl { width: 88px; height: 88px; border-radius: var(--radius-lg); }
.mono { border: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; }
.logo-box--lg.mono { font-size: 1.25rem; }
.logo-box--xl.mono { font-size: 1.75rem; }
.mono--a { background: #e6f4f1; color: #0f6e5f; }
.mono--b { background: #e8f0fb; color: #1e4e9a; }
.mono--c { background: #fdf1dc; color: #8a4b07; }
.mono--d { background: #fbe9ec; color: #9f1f3a; }
.mono--e { background: #efeafb; color: #5b3aa6; }
.mono--f { background: #eceef2; color: #3a4456; }

/* Offres en lignes (offres similaires de la fiche) : un bloc, une ligne par offre séparée par un
   filet ; logo, intitulé du poste, société · ville · contrat · date, flèche. Le lien du titre
   couvre la ligne. */
.job-rows { margin: 16px 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.job-rows > li + li { border-top: 1px solid var(--line); }
.job-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 16px 20px; transition: background-color var(--fast) var(--ease); }
.job-row:hover { background: var(--surface-2); }
.job-row:has(.job-row__link:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.job-row .logo-box { grid-row: span 2; width: 44px; height: 44px; }
.job-row__title { min-width: 0; font-family: var(--display); font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-row__link { color: var(--ink); text-decoration: none; }
.job-row__link::after { content: ""; position: absolute; inset: 0; }
.job-row__link:focus-visible { outline: none; }
.job-row:hover .job-row__link { color: var(--primary); }
.job-row__meta { grid-column: 2; min-width: 0; font-size: 0.875rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-row__go { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; color: var(--muted); transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.job-row:hover .job-row__go { color: var(--primary); transform: translateX(3px); }
@media (min-width: 768px) { .job-row { padding: 18px 24px; } }

/* ---------- 15. Pagination ---------- */
/* Partout : [←] [Page 2 / 168] [→], trois pastilles blanches (02/11/2026). Les numéros de page
   restent des liens dans la page, masqués, pour les robots (Google, Indeed). */
.pagination { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.pagination__list {
  display: flex; align-items: center; gap: 2px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
}
.pagination__link {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: var(--radius-full); color: var(--ink-2); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pagination__link:hover { background: var(--surface-2); color: var(--ink); }
.pagination__link[aria-current="page"] { background: var(--primary); color: #fff; }
.pagination__link--nav { color: var(--ink); }
/* Pagination simple (recherche, pages société) : « Précédent » et « Suivant » en toutes lettres. */
.pagination__link--texte { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; color: var(--ink); }
/* Deux boutons séparés, chacun dans sa pastille blanche (demande du 02/11/2026). */
.pagination__list--separe { gap: 12px; padding: 0; background: none; border: 0; box-shadow: none; }
/* Ordinateur : [← Précédent] [Page 2 / 168] [Suivant →] ; mobile : [←] [Page 2 / 168] [→] sur toute
   la largeur (02/11/2026). Sur mobile, le texte reste pour les lecteurs d'écran. */
.pagination__compteur {
  display: inline-flex; align-items: center; height: 46px; padding: 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
  font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pagination__list--separe .pagination__link--texte {
  height: 46px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.pagination__list--separe .pagination__link--texte:hover { background: var(--surface-2); }
.pagination__link[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.pagination__gap { min-width: 24px; text-align: center; color: var(--muted); }
.pagination__compact { display: none; padding: 0 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pagination__status { font-size: 0.875rem; color: var(--muted); }
@media (max-width: 639.98px) {
  .pagination__num { display: none; }
  .pagination__compact { display: block; }
  .pagination__list--separe { width: 100%; }
  .pagination__list--separe > li:has(> .pagination__compteur) { flex: 1; min-width: 0; }
  .pagination__compteur { width: 100%; justify-content: center; }
  .pagination__list--separe .pagination__link--texte { width: 46px; padding: 0; gap: 0; justify-content: center; }
  .pagination__texte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ---------- 16. Publicité ---------- */
.ad-slot {
  position: relative; display: grid; place-items: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: repeating-linear-gradient(-45deg, #f0f2f5 0 10px, #f6f7f9 10px 20px);
  color: #8a909b; font-size: 0.8125rem; text-align: center;
}
/* « é » échappé (\e9) : le libellé reste juste même si le fichier est lu dans un autre encodage */
.ad-slot::before {
  content: "Publicit\e9"; position: absolute; top: 8px; left: 12px;
  font-size: 0.75rem; font-weight: 600; color: #8a909b;
}
.ad-slot--banner { min-height: 100px; }
/* Fiche offre : annonce après la description, bien détachée du texte et de l'encadré Postuler */
.ad-slot--fiche { margin-top: 40px; }
.ad-slot--rect { min-height: 250px; }
@media (min-width: 768px) { .ad-slot--banner { min-height: 90px; } }

/* ---------- 17. En-tête de page (listes) ---------- */
.page-head { padding-block: 16px 24px; }
.page-head__count { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; }
.page-head__count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.page-head__sub { margin-top: 8px; color: var(--ink-2); font-size: 1.0625rem; }

.company-head { display: flex; align-items: center; gap: 16px; }
.company-head__body { min-width: 0; }

/* ---------- 18. Encarts latéraux ---------- */
.aside-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.aside-card + .aside-card, .aside-card + .ad-slot, .ad-slot + .aside-card { margin-top: 20px; }
.aside-card__title { font-size: 1.0625rem; margin-bottom: 12px; }
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 10px; margin-inline: -10px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 500; text-decoration: none;
}
.link-list a:hover { background: var(--surface-2); color: var(--primary); }
.link-list .count { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-2); }
.link-list a:hover .count { background: var(--primary-tint); color: var(--primary); }

/* ---------- 19. Villes, secteurs, entreprises (accueil) ---------- */
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .city-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.city-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 132px; padding: 20px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease), transform var(--base) var(--ease);
}
.city-tile::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(221, 0, 0, 0.14), transparent); opacity: 0; transition: opacity var(--base) var(--ease); }
.city-tile:hover { border-color: var(--line-hover); color: var(--ink); }
.city-tile:hover::after { opacity: 1; }
.city-tile__name { font-family: var(--display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; }
.city-tile__count { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; color: var(--muted); }
.city-tile__count .icon { color: var(--primary); transition: transform var(--fast) var(--ease); }
.city-tile:hover .city-tile__count .icon { transform: translateX(3px); }
.city-grid .city-tile:first-child { grid-column: span 2; }
@media (min-width: 768px) { .city-grid .city-tile:first-child { grid-column: auto; } }

.sector-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sector-item {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.sector-item:hover { border-color: var(--line-hover); color: var(--ink); }
.sector-item__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-tint); color: var(--primary); transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.sector-item:hover .sector-item__icon { background: var(--primary); color: #fff; }
.sector-item__name { flex: 1; min-width: 0; font-weight: 600; }
.sector-item__count { font-size: 0.875rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.company-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .company-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .company-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.company-tile {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease), transform var(--base) var(--ease);
}
.company-tile:hover { border-color: var(--line-hover); color: var(--ink); }
.company-tile > span:last-child { min-width: 0; }
.company-tile__name { font-weight: 700; font-size: 0.9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.company-tile__count { font-size: 0.8125rem; font-weight: 600; color: var(--primary); }

/* ---------- 20. Bandeau recruteurs ---------- */
.cta-band {
  position: relative; overflow: hidden; padding: 36px 24px;
  background: var(--ink); color: #b9bdc8; border-radius: var(--radius-xl);
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 100% 0%, rgba(221, 0, 0, 0.55), transparent 70%), radial-gradient(400px 260px at 0% 100%, rgba(255, 92, 70, 0.25), transparent 70%); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band__title { color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); letter-spacing: -0.04em; max-width: 22ch; }
.cta-band__text { margin-top: 16px; max-width: 52ch; font-size: 1.0625rem; color: #b9bdc8; }
.cta-band__points { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.cta-band__points li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); background: rgba(255, 255, 255, 0.05); color: #b9bdc8; }
.cta-band__points strong { color: #fff; font-weight: 600; }
.cta-band__points .icon { flex: none; color: #ff7a6b; margin-top: 2px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (min-width: 1024px) {
  .cta-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; padding: 64px; }
  .cta-band__points { margin-top: 0; }
}

/* ---------- 21. Fiche offre ---------- */
.job-header { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .job-header { padding: 28px 32px; } }
.job-header__company { display: flex; align-items: center; gap: 14px; }
.job-header__company-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.job-header__company-name:hover { color: var(--primary); text-decoration: underline; }
.job-header__company-sub { font-size: 0.875rem; color: var(--muted); }
.job-header__title { margin-top: 20px; font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); overflow-wrap: anywhere; }
.job-header .meta-row { margin-top: 16px; gap: 8px; }
.job-header .meta-row li { position: relative; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-2); font-weight: 600; }
.job-header .meta-row a { color: inherit; text-decoration: none; }
/* Toute la pastille est cliquable, avec 4 px de marge tactile (44 px de haut) */
.job-header .meta-row a::after { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; }
.job-header .meta-row li:has(a):hover { background: var(--primary-tint); }
.job-header .meta-row a:hover { color: var(--primary); text-decoration: underline; }
.job-header__dates { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; font-size: 0.875rem; color: var(--muted); }
.job-header__dates strong { color: var(--ink-2); font-weight: 600; }
.job-header__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Mobile : Postuler et Partager sur la même ligne (dès 360 px), Postuler prend la place restante */
.job-header__actions .btn--primary { flex: 1 1 auto; }
/* Aperçu d'une offre avant envoi : rien n'y est cliquable (Postuler, liens du texte, carte de liste) */
.apercu .job-header__actions .btn, .apercu .job-body a, .apercu .job-card a { pointer-events: none; cursor: default; }
@media (max-width: 639.98px) { .job-header__actions .btn { padding-inline: 20px; } }
@media (min-width: 1024px) { .job-header__actions .btn--primary { flex: 0 0 auto; } }

.job-body { margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .job-body { padding: 32px; } }
.job-section + .job-section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.job-section__title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 1.25rem; }
.job-section__title .icon { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--primary-tint); color: var(--primary); }

.apply-box {
  display: grid; gap: 16px; margin-top: 32px; padding: 24px;
  background: var(--primary-tint); border: 1px solid var(--primary-tint-2); border-radius: var(--radius-lg);
}
.apply-box__title { font-size: 1.25rem; }
.apply-box__text { color: var(--ink-2); }
/* Fiche offre : fond orange, pour que le second bouton Postuler se voie */
.apply-box--orange { background: #ffe4c4; border-color: #ffc98a; }
.apply-box--orange .apply-box__text { color: #5c3d1a; }
/* Fiche offre : offres similaires bien détachées */
/* Mots-clés de l'offre (étiquettes), en bas de la carte de la description, après un filet */
.job-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.job-similaires { margin-top: 64px; }
/* Titre « Offres similaires » collé à sa liste (03/11/2026) */
.job-similaires .section__head, #similaires-expiree .section__head { margin-bottom: 16px; }
.job-similaires .job-rows, #similaires-expiree .job-rows { margin-top: 0; }
/* Mobile : « Tout voir » sur la ligne du titre au lieu du lien long renvoyé à la ligne */
.job-similaires .section__head, #similaires-expiree .section__head { flex-wrap: nowrap; align-items: center; }
.show-mobile-court { display: none; }
@media (max-width: 639.98px) {
  .hide-mobile-court { display: none; }
  .show-mobile-court { display: inline; }
  .job-similaires .section__link, #similaires-expiree .section__link { flex: none; white-space: nowrap; }
}
@media (min-width: 768px) { .apply-box { grid-template-columns: 1fr auto; align-items: center; padding: 28px 32px; } }

.summary-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.summary-card__note { display: flex; gap: 8px; margin-top: 12px; font-size: 0.8125rem; color: var(--muted); }
.summary-card__note .icon { width: 16px; height: 16px; color: var(--primary); margin-top: 2px; }
.sticky-aside { position: sticky; top: calc(var(--header-h) + 20px); }
/* Fiche offre : résumé et annonce plus hauts que la fenêtre. D'abord sans la liste des informations,
   déjà en tête de l'offre ; s'ils ne tiennent toujours pas, la colonne défile avec la page (theme.js). */
.sticky-aside.is-compact .summary-card > .aside-card__title,
.sticky-aside.is-compact .meta-list { display: none; }
.sticky-aside.is-static { position: static; }

.meta-list { display: grid; gap: 0; margin: 16px 0 0; }
.meta-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.meta-list dt { color: var(--muted); }
.meta-list dt { flex: none; }
.meta-list dd { min-width: 0; margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.meta-list dd a { color: var(--ink); }
.meta-list dd a:hover { color: var(--primary); }

/* Barre Postuler fixe sur mobile, au-dessus de l'annonce ancrée en bas de l'écran s'il y en a
   une : sa hauteur est donnée par --pub-ancre (plugin emplois-core, mesure.js) */
.apply-bar {
  position: fixed; left: 0; right: 0; bottom: var(--pub-ancre, 0px); z-index: var(--z-bar);
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(16, 24, 40, 0.25);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--base) var(--ease), visibility 0s linear var(--base);
}
/* Masquée, la barre sort aussi de l'ordre de tabulation : pas de focus invisible hors écran */
.apply-bar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.apply-bar__info { flex: 1; min-width: 0; }
.apply-bar__title { font-size: 0.875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apply-bar__company { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apply-bar .btn { flex: none; }
@media (min-width: 1024px) { .apply-bar { display: none; } }
body.has-apply-bar { padding-bottom: calc(80px + var(--pub-ancre, 0px)); }
/* Bandeau cookies ouvert : la barre Postuler ne transparaît pas derrière le voile */
body:has(dialog.cookie[open]) .apply-bar { visibility: hidden; }
/* Mobile : la page ne défile plus derrière une fenêtre (Postuler, Connexion, cookies) ni derrière le menu ouvert */
@media (max-width: 1023.98px) {
  body:has(dialog[open]:not(.cookie--libre)), body:has(.nav.is-open) { overflow: hidden; }
  .postuler, .connexion { overscroll-behavior: contain; }
}
@media (min-width: 1024px) { body.has-apply-bar { padding-bottom: 0; } }

/* Partage */
.share__label { font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-right: 4px; }
/* Bloc Postuler + bande de partage (variante D, 03/11/2026) : la bande, plus claire, ferme le
   bloc orange ; sur mobile, texte et ronds centrés l'un sous l'autre. */
.apply-box--partage { gap: 0; padding: 0; overflow: hidden; }
.apply-box__haut { display: grid; gap: 16px; padding: 24px; }
.apply-box__partage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; background: #fff4e6; border-top: 1px solid #ffc98a; font-size: 0.9375rem; color: #5c3d1a;
}
.apply-box--bande .apply-box__partage { border-top: 0; }
.apply-box__partage b { color: var(--ink); font-weight: 600; }
.apply-box__ronds { display: flex; gap: 8px; }
.apply-box__rond {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 50%;
  color: #fff; text-decoration: none; transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.apply-box__rond:hover { color: #fff; filter: brightness(0.92); transform: translateY(-1px); }
.apply-box__rond .icon { width: 18px; height: 18px; }
.apply-box__rond--whatsapp { background: #25d366; }
.apply-box__rond--facebook { background: #1877f2; }
.apply-box__rond--linkedin { background: #0a66c2; }
.apply-box__rond--lien, .apply-box__rond--lien:hover { background: var(--surface); border-color: #ffc98a; color: var(--ink-2); filter: none; }
.apply-box__rond--lien.is-copie { border-color: var(--success); color: var(--success); }
@media (pointer: coarse) { .apply-box__rond { width: 44px; height: 44px; } }
@media (max-width: 559.98px) { .apply-box__partage { flex-direction: column; text-align: center; } }
@media (min-width: 768px) {
  .apply-box--partage { grid-template-columns: 1fr; padding: 0; }
  .apply-box__haut { grid-template-columns: 1fr auto; align-items: center; padding: 28px 32px; }
  .apply-box__partage { padding: 14px 32px; }
}

/* ---------- 22. Récapitulatif (candidature, aperçu) ---------- */
.recap-card { display: flex; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.recap-card__body { min-width: 0; }
.recap-card__label { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.recap-card__title { margin-top: 2px; font-family: var(--display); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
.recap-card .meta-row { margin-top: 6px; }

.form-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .form-card { padding: 40px; } }

/* Étapes */
.stepper { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.stepper__item { flex: 1; display: grid; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); counter-increment: step; }
.stepper__item::before { content: ""; height: 4px; border-radius: var(--radius-full); background: var(--line); }
.stepper__item span::before { content: counter(step) ". "; }
.stepper__item.is-done, .stepper__item.is-current { color: var(--ink); }
.stepper__item.is-done::before, .stepper__item.is-current::before { background: var(--primary); }
.stepper__item.is-current { color: var(--primary); }

/* ---------- 23. Contenu éditorial ---------- */
.prose { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; font-size: 1.5rem; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h3 { margin-top: 1.6em; font-size: 1.1875rem; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--primary); }
.prose strong { color: var(--ink); }
.prose a { font-weight: 600; }
.prose img { border-radius: var(--radius); }
.prose blockquote { margin-inline: 0; padding: 16px 20px; border-left: 4px solid var(--primary); background: var(--primary-tint); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); color: var(--ink); font-weight: 700; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap table { margin: 0; }
/* Mobile : police réduite, et ombres de bord qui signalent qu'on peut faire glisser le tableau */
@media (max-width: 639.98px) {
  .table-wrap table { font-size: 0.875rem; }
  .table-wrap th, .table-wrap td { padding: 8px 6px; }
  .table-wrap {
    background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(12, 13, 18, 0.22), rgba(12, 13, 18, 0)), radial-gradient(farthest-side at 100% 50%, rgba(12, 13, 18, 0.22), rgba(12, 13, 18, 0)) 100% 0;
    background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll;
  }
  .table-wrap th { background: transparent; }
}
.prose > :first-child { margin-top: 0; }

.content-head { padding-block: 24px 32px; }
.content-head__lead { margin-top: 12px; max-width: 60ch; font-size: 1.125rem; color: var(--ink-2); }

.toc { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.toc__title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; min-height: 44px; padding: 8px 12px; margin-inline: -12px; border-radius: var(--radius-full); color: var(--ink-2); font-size: 0.9375rem; text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.toc a:hover { background: var(--surface-2); color: var(--primary); }
.toc a[aria-current="true"] { background: var(--primary-tint); color: var(--primary); font-weight: 600; }

.partner-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partner-card {
  display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.partner-card__head { display: flex; align-items: center; gap: 14px; }
.partner-card__name { font-size: 1.0625rem; }
.partner-card__text { flex: 1; color: var(--muted); font-size: 0.9375rem; }
.partner-card__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; }

/* ---------- 24. Page 404 ---------- */
.error-hero { padding-block: 48px 32px; text-align: center; }
.error-hero__code {
  display: inline-block; font-family: var(--display); font-size: clamp(4rem, 3rem + 6vw, 7.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--primary);
  background: var(--pattern); -webkit-background-clip: text; background-clip: text;
}
.error-hero__title { max-width: 26ch; margin: 16px auto 0; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); }
.error-hero__text { max-width: 52ch; margin: 12px auto 0; color: var(--muted); }

/* ---------- 25. Pied de page ---------- */
/* Même noir que la barre du haut et le bandeau recruteurs (--ink) ; textes clairs (9:1 et plus sur ce fond) */
.site-footer { background: var(--ink); color: #b9bdc8; }
.footer__grid { display: grid; gap: 40px; padding-block: 64px 48px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; } }
.footer__about p { margin-top: 16px; max-width: 40ch; font-size: 0.9375rem; line-height: 1.65; }
.footer__title { margin-bottom: 12px; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.footer__links { margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: 36px; color: #b9bdc8; text-decoration: none; font-size: 0.9375rem; }
.footer__links a:hover { color: #fff; }
.footer__recruit { padding: 24px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); }
.footer__recruit p { font-size: 0.9375rem; margin-bottom: 18px; }
/* Filet aligné sur le contenu (le conteneur porte la marge latérale) */
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 20px; font-size: 0.875rem; color: #b9bdc8; }
.footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, 0.1); }

/* ---------- 26. Bandeau cookies ----------
   Mur de consentement : fenêtre modale sur un voile tant que le visiteur n'a pas accepté,
   en bas de l'écran sur mobile, au centre sur ordinateur. Sur la politique de
   confidentialité (--libre), fenêtre non modale en bas de l'écran : la page reste lisible. */
html.cookie-bloque { overflow: hidden; }
.cookie {
  width: calc(100% - 24px); max-width: 440px; max-height: calc(100dvh - 24px); overflow-y: auto;
  margin: auto auto 12px; padding: 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: cookie-in 320ms var(--ease) both;
}
.cookie::backdrop { background: rgba(12, 13, 18, 0.55); }
.cookie:focus { outline: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } }
@media (min-width: 768px) { .cookie { margin: auto; } }
.cookie--libre { position: fixed; inset: auto 12px 12px; z-index: var(--z-cookie); width: auto; margin: 0; }
@media (min-width: 768px) { .cookie--libre { inset: auto auto 24px 24px; width: 100%; margin: 0; } }
.cookie__title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; }
.cookie__title .icon { color: var(--primary); }
.cookie__text { margin-top: 8px; font-size: 0.875rem; color: var(--ink-2); }
.cookie__actions { display: grid; margin-top: 16px; }

.switch { position: relative; flex: none; width: 44px; height: 26px; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--line-strong); transition: background-color var(--fast) var(--ease); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--base) var(--ease); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: var(--ring); }
.switch input:disabled + span { opacity: 0.6; }

/* ---------- 27. Guide des composants ---------- */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.swatch { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 0.8125rem; }
.swatch__color { height: 64px; }
.swatch__body { padding: 10px 12px; }
.swatch__name { font-weight: 700; color: var(--ink); }
.swatch__hex { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.demo-block { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.demo-block__label { margin-bottom: 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- 28. Sommaire de la maquette ---------- */
.index-card { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.index-card__num { font-family: var(--display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--primary); }
.index-card__title { font-size: 1.125rem; }
.index-card__title a { color: var(--ink); text-decoration: none; }
.index-card__title a:hover { color: var(--primary); text-decoration: underline; }
.index-card__url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.index-card .chip-list { margin-top: auto; }
.index-card .chip, .results-aside .chip { min-height: 32px; padding: 4px 12px; font-size: 0.8125rem; }

.pt-0 { padding-top: 0 !important; }

/* ---------- 29. Compléments par gabarit ---------- */

/* Carte d'offre, mobile : le badge passe au-dessus du titre pour lui laisser la largeur */
@media (max-width: 639.98px) {
  .job-card__top { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
}

/* Listes */
.job-list > li.job-list__ad > .ad-slot { flex: 1; }
/* Listes, mobile et tablette : la colonne est repliée dans un panneau qui monte du bas, ouvert par
   l'icône « Secteurs et villes » de la barre de recherche (demande du 02/11/2026). Les liens restent dans la page (robots).
   Sans JavaScript, la classe is-repliable n'est pas posée : la colonne reste sous la liste. */
.aside-voile[hidden] { display: none; }
.aside-sheet__head { display: none; }
.aside-sheet__title { margin: 0; font-family: var(--font-display, inherit); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
@media (max-width: 1023.98px) {
  .results-aside.is-repliable {
    /* Au-dessus de la pub ancrée de Google en bas d'écran : sa hauteur est dans --pub-ancre (mesure.js). */
    position: fixed; left: 0; right: 0; bottom: var(--pub-ancre, 0px); z-index: var(--z-overlay);
    max-height: calc(85vh - var(--pub-ancre, 0px)); max-height: calc(85dvh - var(--pub-ancre, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(12, 13, 18, 0.18);
    transform: translateY(calc(100% + var(--pub-ancre, 0px))); visibility: hidden;
    transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .results-aside.is-repliable.is-open { transform: none; visibility: visible; transition: transform 0.25s var(--ease); }
  .results-aside.is-repliable .aside-sheet__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 1; margin: 0 -16px 12px; padding: 14px 16px 10px; background: var(--bg);
  }
  .aside-voile { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); background: rgba(12, 13, 18, 0.55); }
  html.aside-ouverte { overflow: hidden; }
}
@media (min-width: 1024px) { .aside-toggle { display: none !important; } }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.empty-state .chip-list { justify-content: center; margin-top: 8px; }
.empty-state__suggest { margin-top: 20px; font-size: 0.875rem; font-weight: 600; color: var(--muted); }

/* Fiche offre : l'encart occupe toute la hauteur de la colonne pour rester visible au défilement */
.job-aside { align-self: stretch; }
.job-header__company .badge { margin-left: auto; }

/* Formulaires : les variantes de champ masquées ne créent pas d'espace */
.form-fields { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.form-fields > .field + .field { margin-top: 0; }
.file-drop__title, .file-drop__meta { display: block; }
.form-submit { width: 100%; }
@media (min-width: 640px) { .form-submit { display: inline-flex; width: auto; } }

/* Page 404 */
.error-hero .sf { margin-top: 32px; text-align: left; }
.error-hero__home { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 16px; font-weight: 600; text-decoration: none; }

/* Publier une offre */
/* Chapeau de la page : petit texte discret */
.content-head__lead--court { font-size: 1rem; line-height: 1.3; color: var(--muted); }

/* Premier écran de /publiez-vos-offres-demploi (validé le 24/10/2026) : le recruteur choisit
   comment publier avant d'ouvrir le formulaire. Un recruteur connecté ne le voit pas. */
.choix { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 900px) { .choix { grid-template-columns: 1.15fr 1fr; gap: 20px; } }
.choix > * { min-width: 0; }
.choix-carte { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .choix-carte { padding: 32px; } }
.choix-carte__tete { display: flex; align-items: center; gap: 14px; }
.choix-carte__titre { font-size: 1.3125rem; letter-spacing: -0.025em; }
.choix-carte__texte { color: var(--muted); }
.choix-carte .check-list { margin-top: 2px; }
.choix-carte__action { margin-top: auto; padding-top: 8px; }
/* Carte mise en avant : créer son espace entreprise */
.choix-carte--avant { border-color: var(--primary-tint-2); background: linear-gradient(160deg, var(--primary-tint) 0%, #fff 55%); }
.choix-carte--avant .sector-item__icon { background: var(--primary); color: #fff; }
.choix-carte__badge { align-self: flex-start; }
@media (min-width: 768px) { .choix-carte__badge { position: absolute; top: 20px; right: 20px; } }
/* Troisième choix : publier sans compte, sur toute la largeur, plus discret */
.choix-sans { grid-column: 1 / -1; display: grid; gap: 14px; align-items: center; padding: 20px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
@media (min-width: 768px) { .choix-sans { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; padding: 20px 28px; } }
.choix-sans__titre { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.choix-sans__texte { margin-top: 2px; font-size: 0.9375rem; color: var(--muted); }
.choix-sans .sector-item__icon { background: var(--surface-2); color: var(--ink-2); }
.choix-aide { margin: 20px 0 0; font-size: 0.875rem; color: var(--muted); }

.pill input[type="radio"] + span::before { border-radius: 50%; }

.num-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: n; }
.num-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; counter-increment: n; font-size: 0.9375rem; color: var(--ink-2); }
.num-list li::before { content: counter(n); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-family: var(--display); font-weight: 700; font-size: 0.875rem; }
.num-list strong { display: block; color: var(--ink); }

.check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 10px; font-size: 0.9375rem; color: var(--ink-2); }
.check-list .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--primary); }


/* Champs désactivés (envoi en cours) */
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }

/* En-tête d'encart avec icône */
.aside-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.aside-card__head .aside-card__title { margin-bottom: 0; }
.aside-card__head .sector-item__icon { flex: none; }

/* Fil d'Ariane réduit à « Accueil » sur mobile : on le masque */
@media (max-width: 639.98px) { .breadcrumb:not(:has(li:nth-child(3))) { display: none; } }

/* Bandeau au-dessus de l'en-tête d'offre (offre expirée) */
.alert + .job-header { margin-top: 16px; }

/* Cartes en grille : pas de marge empilée */
.grid > .aside-card + .aside-card { margin-top: 0; }

/* Contenu éditorial */
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.title-icon { display: flex; align-items: center; gap: 10px; }
.how-card { display: flex; flex-direction: column; }
.how-card .prose { flex: 1; }
.partner-card__head .badge { margin-top: 6px; }
.content-head__date { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.875rem; color: var(--muted); }
.toc__toggle { width: 100%; justify-content: space-between; }
.toc__toggle > span { display: inline-flex; align-items: center; gap: 8px; }
.toc--mobile ol { margin-top: 8px; }

/* Variantes sur une colonne */
@media (min-width: 1024px) { .cta-band--single { display: block; } }
@media (min-width: 768px) { .apply-box--stack { grid-template-columns: 1fr; } }

/* Bouton contour clair sur fond foncé */
.btn--outline-light { --btn-bg: transparent; --btn-ink: #fff; --btn-line: rgba(255, 255, 255, 0.4); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }

/* Guide des composants */
.type-h1 { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.type-h2 { font-family: var(--display); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.type-h3 { font-family: var(--display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.type-row { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--line); }
.type-row:first-child { border-top: 0; padding-top: 0; }
.type-row__meta { font-size: 0.8125rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.demo-dark { padding: 16px; background: var(--ink); border-radius: var(--radius); }
.is-focus-demo { border-color: var(--primary) !important; box-shadow: var(--ring); }
.guide-section + .guide-section { margin-top: 48px; }
.guide-section > h2 { margin-bottom: 8px; }
.guide-section > .section__sub { margin-bottom: 20px; }
.demo-block + .demo-block { margin-top: 16px; }
.demo-note { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }

/* ---------- 30. Espace entreprise ---------- */
/* Repris du thème (assets/css/theme.css) : liste des offres du compte, fenêtre de connexion,
   champ mot de passe, liens de l'en-tête et du pied de page. */

a.icon-btn { text-decoration: none; }
.icon-btn[aria-current="page"] { background: var(--primary-tint); color: var(--primary); }

/* Pied de page : liens sous « Publier une offre » */
.footer__espace { display: grid; gap: 2px; margin-top: 14px; }
.footer__espace a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: #fff; font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.footer__espace a:hover { color: #ff9d92; }

/* /mes-offres : messages, barre de recherche, offres du compte et leurs actions */
.dashboard__message { margin-bottom: 24px; }
.dashboard__search { flex: 1 1 260px; max-width: 420px; }
.dash-actions,
.dash-job__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-login .dash-actions { margin-top: 16px; }
.dashboard-login > .aside-card + .aside-card { margin-top: 0; }
.dash-list { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.dash-job { display: grid; gap: 14px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 768px) {
  .dash-job { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .dash-job__actions { justify-content: flex-end; max-width: 380px; }
}
.dash-job__title { font-size: 1.0625rem; line-height: 1.35; }
.dash-job__title a { color: var(--ink); text-decoration: none; }
.dash-job__title a:hover { color: var(--primary); text-decoration: underline; }
.dash-job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: 0.875rem; color: var(--muted); }
.dash-job__soon { color: var(--warning); font-weight: 600; }
.dash-job__actions .job-dashboard-action-delete { color: var(--danger); }

/* Fenêtre « Postuler » : boîte de dialogue native, comme la connexion. L'adresse du recruteur
   n'y apparaît qu'après la vérification anti-robot. */
.postuler {
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.postuler::backdrop { background: rgba(12, 13, 18, 0.55); }
.postuler__corps { position: relative; padding: 28px 24px 24px; }
.postuler__fermer { position: absolute; top: 12px; right: 12px; }
.postuler__titre { display: flex; align-items: center; gap: 10px; margin: 0 40px 4px 0; font-size: 1.375rem; line-height: 1.3; outline: none; }
.postuler__titre .icon { color: var(--primary); flex: none; }
.postuler__poste { color: var(--muted); }
.postuler__etape { margin-top: 20px; }
.postuler__label { font-weight: 600; color: var(--ink); outline: none; }
.postuler__captcha { margin-top: 12px; min-height: 65px; }
.postuler__cv { margin-top: 8px; font-size: 0.875rem; color: var(--muted); }
.postuler__appli { padding: 10px 14px; font-size: 0.875rem; }
.postuler .summary-card__note { margin-top: 20px; }
.apply-email {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.apply-email > .icon { color: var(--primary); flex: none; }
/* L'adresse prend toute la ligne sur petit écran : le bouton « Copier » passe dessous. */
.apply-email__address { flex: 1 1 14rem; min-width: 0; font-weight: 700; font-size: 1.0625rem; color: var(--ink); overflow-wrap: anywhere; }
.apply-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.apply-subject__text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; color: var(--ink); }
/* Fenêtre ouverte : la barre « Postuler » fixée en bas de l'écran est inutile. */
.apply-panel-open .apply-bar { display: none !important; }
@media (max-width: 599.98px) {
  .postuler { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .postuler__corps { padding: 24px 16px; }
  .apply-actions .btn { flex: 1 1 100%; }
}

/* Fenêtre de connexion : boîte de dialogue native, centrée sur ordinateur, plein écran sur mobile */
.connexion {
  width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.connexion::backdrop { background: rgba(12, 13, 18, 0.55); }
.connexion__corps { position: relative; padding: 28px 24px 24px; }
.connexion__fermer { position: absolute; top: 12px; right: 12px; }
.connexion__titre { margin: 0 40px 16px 0; font-size: 1.375rem; line-height: 1.3; }
.connexion__form { display: grid; gap: 4px; }
.connexion__form .field + .field { margin-top: 12px; }
.connexion__form > .btn { margin-top: 12px; }
.connexion__form .alert { margin-bottom: 8px; }
.connexion__form > .checkbox { margin-top: 8px; }
.connexion__liens { margin: 12px 0 0; text-align: center; font-size: 0.9375rem; }
.connexion__liens + .connexion__liens { margin-top: 4px; }
.connexion__liens .link-btn { min-height: 44px; }
.connexion [data-succes] { margin-top: 8px; }
@media (max-width: 599.98px) {
  .connexion { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .connexion__corps { padding: 24px 16px; }
}
/* Maquette seulement : fenêtre de démonstration (connexion.html), non modale pour que la barre
   de maquette reste utilisable. Sur le site, la fenêtre s'ouvre avec showModal(). */
.connexion.is-demo { position: fixed; inset: var(--mock-h, 0px) 0 0 0; z-index: var(--z-overlay); margin: auto; height: fit-content; }
.connexion-voile { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); background: rgba(12, 13, 18, 0.55); }
html.cx-demo { overflow: hidden; }
@media (max-width: 599.98px) { .connexion.is-demo { height: auto; margin: 0; } }

/* Mot de passe et bouton « Afficher » */
.mdp { position: relative; }
.mdp .input { padding-right: 96px; }
.mdp__voir { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }

/* Emplacement de la vérification anti-robot (Cloudflare Turnstile, 300 × 65 px) */
.captcha-demo {
  display: flex; align-items: center; gap: 12px; width: 300px; max-width: 100%; min-height: 65px; margin-top: 4px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fafafa;
  font-size: 0.9375rem; color: var(--ink);
}
.captcha-demo > .icon { color: var(--success); }
.captcha-demo__marque { margin-left: auto; font-size: 0.75rem; color: var(--muted); text-align: right; line-height: 1.3; }

/* ---------- 31. Espace entreprise : tableau de bord ---------- */
/* Gabarit : menu latéral (ordinateur) ou bandeau de liens défilant (mobile), puis le contenu. */
.espace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px var(--section); }
.espace > * { min-width: 0; }
@media (min-width: 1024px) {
  .espace { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 32px; }
}

.espace-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.espace-nav__compte { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.espace-nav__compte > div { min-width: 0; }
.espace-nav__societe { font-weight: 700; line-height: 1.3; }
.espace-nav__email { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espace-nav__publier { padding: 16px 16px 8px; }
/* Même arrondi que les liens du menu, pas celui en pastille des boutons. */
.espace-nav__publier .btn { border-radius: var(--radius-sm); }
.espace-nav__liens { margin: 0; padding: 8px; list-style: none; }
.espace-nav__liens a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px;
  border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.espace-nav__liens a:hover { background: var(--surface-2); color: var(--ink); }
.espace-nav__liens a[aria-current="page"] { background: var(--primary-tint); color: var(--primary); }
.espace-nav__liens .icon { color: currentColor; }
.espace-nav__compteur { margin-left: auto; min-width: 24px; padding: 0 8px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-2); font-size: 0.8125rem; text-align: center; font-variant-numeric: tabular-nums; }
.espace-nav__liens a[aria-current="page"] .espace-nav__compteur { background: #fff; color: var(--primary); }
.espace-nav__pied { padding: 8px; border-top: 1px solid var(--line); }
.espace-nav__aide { padding: 12px; font-size: 0.875rem; color: var(--muted); }
.espace-nav__aide a { font-weight: 600; }
@media (min-width: 1024px) { .espace-nav { position: sticky; top: calc(var(--header-h) + 16px); } }
/* Mobile : les 4 rubriques en grille de 2 × 2, toutes visibles ; la déconnexion est dans « Mon compte » */
@media (max-width: 1023.98px) {
  .espace-nav__compte, .espace-nav__publier, .espace-nav__aide, .espace-nav__pied { display: none; }
  .espace-nav__liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; }
  .espace-nav__liens a { gap: 8px; padding: 8px 10px; font-size: 0.875rem; line-height: 1.25; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .espace-nav__liens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.espace-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.espace-head h1 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }
.espace-head__sub { margin-top: 6px; color: var(--muted); }
.espace-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.espace-fil { margin-bottom: 8px; font-size: 0.875rem; }
.espace-fil a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; }
.espace-fil a:hover { text-decoration: underline; }

.espace-grille { display: grid; gap: 20px; }
.espace-grille > * { min-width: 0; }
@media (min-width: 1200px) { .espace-grille--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

.panel { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.panel__title { font-size: 1.125rem; }
.panel__sub { font-size: 0.875rem; color: var(--muted); }
.panel__lien { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.panel__lien:hover { text-decoration: underline; }

/* Indicateurs (stat tiles) : libellé, valeur, précision */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
a.kpi:hover { border-color: var(--line-hover); color: var(--ink); }
.kpi__label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.kpi__label .icon { width: 18px; height: 18px; color: var(--primary); }
.kpi__valeur { font-family: var(--display); font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; }
.kpi__note { font-size: 0.8125rem; color: var(--muted); }
.kpi__note--alerte { color: var(--warning); font-weight: 600; }

/* À faire : une ligne par action à mener */
.todo { margin: 0; padding: 0; list-style: none; }
.todo li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.todo li:first-child { border-top: 0; padding-top: 0; }
.todo li:last-child { padding-bottom: 0; }
.todo__icone { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); }
.todo__icone--alerte { background: var(--warning-tint); color: var(--warning); }
.todo__texte { flex: 1 1 220px; min-width: 0; font-size: 0.9375rem; }
.todo__texte strong { color: var(--ink); }
.todo .btn { flex: none; }

/* Graphique en colonnes (une série) */
.graph { position: relative; }
.graph svg { width: 100%; height: auto; overflow: visible; }
.graph__grille { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.graph__axe { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.graph__barre { fill: var(--primary); }
.graph__cible { fill: transparent; cursor: default; }
.graph__cible:focus { outline: none; }
.graph__cible:focus-visible + .graph__barre, .graph__cible:hover + .graph__barre { fill: var(--primary-hover); }
.graph__infobulle {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 8px));
  padding: 6px 10px; border-radius: var(--radius-sm); background: var(--ink); color: #fff;
  font-size: 0.8125rem; line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow);
}
.graph__infobulle strong { font-size: 0.9375rem; }
.graph__total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.graph__total strong { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.graph__total span { font-size: 0.875rem; color: var(--muted); }
.graph__donnees { margin-top: 12px; font-size: 0.875rem; }
.graph__donnees summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--primary); cursor: pointer; }
.graph__donnees .table-wrap { max-height: 260px; overflow-y: auto; }

/* Tableau des offres (ordinateur) ; sur mobile, chaque ligne devient un bloc */
.table-offres { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table-offres th, .table-offres td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table-offres thead th { padding-top: 0; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.table-offres tbody tr:last-child > * { border-bottom: 0; }
.table-offres th:first-child, .table-offres td:first-child { padding-left: 0; }
.table-offres th:last-child, .table-offres td:last-child { padding-right: 0; }
.table-offres .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-offres a { color: var(--ink); font-weight: 600; text-decoration: none; }
.table-offres a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 639.98px) {
  .table-offres:not(.table-offres--simple), .table-offres:not(.table-offres--simple) tbody { display: block; }
  .table-offres:not(.table-offres--simple) thead { display: none; }
  .table-offres:not(.table-offres--simple) tr { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .table-offres:not(.table-offres--simple) tbody tr:last-child { border-bottom: 0; }
  .table-offres:not(.table-offres--simple) td { padding: 0; border: 0; }
  .table-offres:not(.table-offres--simple) td:first-child { flex: 1 1 100%; }
  .table-offres:not(.table-offres--simple) .num { text-align: left; font-size: 0.875rem; color: var(--muted); white-space: normal; }
  .table-offres:not(.table-offres--simple) .num::before { content: attr(data-label) " : "; }
}
/* Titres d'offres cliquables : zone tactile de 44 px de haut, sans changer la mise en page */
.dash-job__title a, .table-offres td:first-child a { display: inline-block; padding-block: 11px; margin-block: -11px; }

/* Historique / activité récente */
.historique { margin: 0; padding: 0; list-style: none; }
.historique li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 4px 14px; padding-bottom: 16px; }
.historique li:last-child { padding-bottom: 0; }
.historique li::before { content: ""; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--line-strong); box-shadow: 0 0 0 3px var(--surface); }
.historique li:not(:last-child)::after { content: ""; position: absolute; left: 4.5px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.historique li.is-ok::before { background: var(--success); }
.historique li.is-alerte::before { background: var(--warning); }
.historique li.is-info::before { background: var(--primary); }
.historique__texte { font-size: 0.9375rem; }
.historique__date { grid-column: 2; font-size: 0.8125rem; color: var(--muted); }

/* Mes offres : onglets de statut (liens filtrés), outils, offres avec statistiques */
.statuts { display: flex; gap: 4px; margin: 0 0 16px; padding: 0 0 0; list-style: none; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.statuts::-webkit-scrollbar { display: none; }
.statuts a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 600; white-space: nowrap; text-decoration: none;
}
.statuts a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.statuts a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.statuts .count { padding: 0 8px; border-radius: var(--radius-full); background: var(--surface-2); font-size: 0.8125rem; }
.statuts a[aria-current="page"] .count { background: var(--primary-tint); }
.outils { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.outils .dashboard__search { flex: 1 1 240px; max-width: none; }
.outils__tri { display: flex; align-items: center; gap: 8px; flex: 0 1 300px; }
.outils__tri label { flex: none; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.dash-job__stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 0.875rem; color: var(--ink-2); }
.dash-job__stats span { display: inline-flex; align-items: center; gap: 6px; }
.dash-job__stats .icon { width: 16px; height: 16px; color: var(--muted); }
.dash-job__stats strong { font-variant-numeric: tabular-nums; }

/* Menu « Plus d'actions » d'une offre (details/summary) */
.menu-actions { position: relative; }
.menu-actions > summary { list-style: none; }
.menu-actions > summary::-webkit-details-marker { display: none; }
.menu-actions__liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-sticky); min-width: 220px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.menu-actions__liste a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.menu-actions__liste a:hover { background: var(--surface-2); color: var(--ink); }
.menu-actions__liste .is-danger { color: var(--danger); }
.menu-actions__liste .is-danger:hover { background: var(--danger-tint); color: var(--danger); }
.menu-actions__liste li + li.separe { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

/* Fiche d'une offre dans l'espace */
.offre-statut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 0.9375rem; color: var(--muted); }

/* Profil et compte : sections de réglages */
.reglages > * + * { margin-top: 20px; }
.reglage-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--line); }
.reglage-ligne:first-of-type { border-top: 0; }
.reglage-ligne__texte strong { display: block; font-weight: 600; }
.reglage-ligne__texte span { font-size: 0.875rem; color: var(--muted); }
.panel--danger { border-color: var(--danger-line); }
.panel--danger .panel__title { color: var(--danger); }
/* Compte : cartes avec le même en-tête que les formulaires en blocs (profil, dépôt), une icône
   à la place du numéro, filet sous l'en-tête sur toute la largeur de la carte. */
.reglages > .panel { padding: 24px; box-shadow: var(--shadow-sm); }
.reglages > .panel > .panel__head {
  flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px;
  margin: -6px -24px 20px; padding: 0 24px 14px; border-bottom: 1px solid var(--line);
}
.panel__icone { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--primary-tint); color: var(--primary); }
.panel--danger > .panel__head { border-bottom-color: var(--danger-line); }
.panel--danger .panel__icone { background: var(--danger-tint); color: var(--danger); }
@media (min-width: 768px) {
  .reglages > .panel { padding: 32px 40px; }
  .reglages > .panel > .panel__head { margin: -10px -40px 24px; padding: 0 40px 16px; }
}
.apercu-societe { display: flex; align-items: center; gap: 14px; }
.apercu-societe h3 { font-size: 1.125rem; }

/* Profil de l'entreprise (espace-profil.html) : grand logo dans le formulaire, pastilles
   « Public » et « Privées » à côté des titres, aperçu en direct qui reste visible au défilement. */
.badge--danger { background: var(--danger-tint); color: var(--danger); }
.profil-logo .file-item { gap: 16px; padding: 14px; }
.profil-logo .file-item .logo-box, .profil-logo .file-item__apercu { width: 96px; height: 96px; border-radius: 12px; }
.profil-logo .file-item__apercu { flex: none; padding: 4px; object-fit: contain; background: var(--surface-2); border: 0; }
.file-item__actions { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 599.98px) {
  .profil-logo .file-item { flex-wrap: wrap; }
  .profil-logo .file-item .logo-box, .profil-logo .file-item__apercu { width: 72px; height: 72px; }
}
@media (min-width: 1200px) { .profil-aside { position: sticky; top: calc(var(--header-h) + 16px); } }
.mb-section { margin-bottom: var(--section); }

/* ---------- 32. Espace entreprise : gabarit (retenu le 23/10/2026) ---------- */
/* En-tête de page en haut, sur toute la largeur ; dessous, barre d'icônes de 120 px et contenu.
   Sur mobile, la barre devient une grille de 2 × 2 rubriques (section 31). */
.espace-haut { padding-top: 24px; }
.espace-haut .espace-head { margin-bottom: 0; }
.espace-haut .espace-fil { margin-bottom: 4px; }
.espace-haut + .espace { padding-top: 24px; }
@media (min-width: 1024px) { .espace-haut { padding-top: 32px; } }

@media (min-width: 1024px) {
  .espace--rail { grid-template-columns: 120px minmax(0, 1fr); }
  .espace--rail .espace-nav { padding-bottom: 8px; }
  .espace--rail .espace-nav__compte { justify-content: center; padding: 14px 8px; }
  .espace--rail .espace-nav__compte > div { display: none; }
  .espace--rail .espace-nav__publier { padding: 12px 10px 4px; }
  .espace--rail .espace-nav__publier .btn { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 4px; font-size: 0.75rem; line-height: 1.2; }
  .espace--rail .espace-nav__liens { padding: 6px; }
  .espace--rail .espace-nav__liens a { position: relative; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; font-size: 0.75rem; line-height: 1.2; text-align: center; }
  .espace--rail .espace-nav__liens .icon { width: 22px; height: 22px; }
  .espace--rail .espace-nav__compteur { position: absolute; top: 6px; right: 14px; min-width: 20px; padding: 0 5px; font-size: 0.75rem; background: var(--primary); color: #fff; }
  .espace--rail .espace-nav__aide { display: none; }
}

/* Tableau de bord : grille de tuiles autour d'une grande tuile « candidats intéressés » */
.vc-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vc-bento > * { min-width: 0; }
@media (min-width: 1100px) {
  .vc-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vc-hero { grid-column: span 2; grid-row: span 2; }
  .vc-large { grid-column: span 2; }
}
@media (max-width: 1099.98px) { .vc-hero, .vc-large { grid-column: 1 / -1; } }
.vc-tuile { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
a.vc-tuile:hover { border-color: var(--line-hover); color: var(--ink); }
.vc-tuile__label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.vc-tuile__label .icon { width: 18px; height: 18px; color: var(--primary); }
.vc-tuile__valeur { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.vc-tuile__note { font-size: 0.8125rem; color: var(--muted); }
.vc-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--primary-tint) 0%, #fff 60%); border-color: var(--primary-tint-2); }
.vc-hero::before { content: ""; position: absolute; inset: 0; background: var(--pattern); -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%); mask-image: linear-gradient(200deg, #000 0%, transparent 55%); pointer-events: none; }
.vc-hero > * { position: relative; }
.vc-hero__valeur { font-family: var(--display); font-size: clamp(2.75rem, 2rem + 2.5vw, 3.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.vc-hero .graph { margin-top: auto; }
.vc-tuile .todo li { padding-block: 10px; }

/* ---------- 32 bis. Page entreprise (/emploi/{société}) ---------- */
/* En-tête : logo, nom, infos clés et site web, dans une carte */
.societe-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 20px; margin-top: 8px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.societe-head h1 { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem); }
.societe-head__body { min-width: 0; }
.societe-head__infos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--muted); }
.societe-head__infos li { display: inline-flex; align-items: center; gap: 6px; }
.societe-head__infos .icon { width: 16px; height: 16px; color: #8a909b; }
.societe-head__infos strong { color: var(--ink); }
.societe-head__site { grid-column: 1 / -1; justify-self: start; }
/* Mobile : une seule colonne, logo réduit au-dessus du titre, infos sur toute la largeur */
@media (max-width: 639.98px) {
  .societe-head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  .societe-head .logo-box--xl { width: 64px; height: 64px; }
  .societe-head .logo-box--xl.mono { font-size: 1.25rem; }
}
@media (min-width: 768px) {
  .societe-head { grid-template-columns: auto minmax(0, 1fr) auto; padding: 32px; }
  .societe-head__site { grid-column: auto; align-self: start; }
}
/* Blocs de la colonne principale */
.societe-bloc + .societe-bloc, .ad-slot + .societe-bloc { margin-top: 40px; }
.societe-bloc:not(.societe-bloc--offres) { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .societe-bloc:not(.societe-bloc--offres) { padding: 32px; } }
.societe-bloc__titre { display: flex; align-items: center; gap: 10px; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.societe-bloc:not(.societe-bloc--offres) .societe-bloc__titre { margin-bottom: 16px; }
.societe-bloc__nombre { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--radius-full); background: var(--primary-tint); color: var(--primary); font-family: var(--font); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; }
.societe-revendiquer { border-color: var(--primary-tint-2); background: var(--primary-tint); }
/* « Voir les N autres offres » : au-delà de 10, la suite se déplie sous la liste */
.voir-plus { margin-top: 16px; }
.voir-plus > summary { list-style: none; cursor: pointer; }
.voir-plus > summary::-webkit-details-marker { display: none; }
.voir-plus[open] > summary { display: none; }
.voir-plus > .job-rows { margin-top: 0; }