/* =====================================================================
   WorkDispo — pages de liste d'offres (refonte 2026)
   Maquette Claude Design « Offres WorkDispo 2026 — filtres à gauche »,
   variante choisie par Sam le 22/09/2026.

   Chargée UNIQUEMENT par templates/search/missions.html.twig
   (/offres, /offres-*, /freelance-*, /emploi, /emploi-*, pages ville,
   /stage-*, /alternance-*, /missions-freelance).

   Isolation : toutes les règles sont portées par .wdo / .wdo-* ou par
   body.wd-offres. Aucune autre page n'est touchée. Les polices et les
   couleurs de marque viennent de css/site-2026.css (variables --wd-*).
   ===================================================================== */

/* ---------- Fond de page (uniquement ces pages) ---------- */
body.wd-offres,
body.wd-offres #wrapper { background: #F7F9FD; }

/* ---------- Racine et jetons ---------- */
.wdo {
  --wdo-ink: var(--wd-ink, #0F1836);
  --wdo-ink-2: var(--wd-ink-2, #33405C);
  --wdo-muted: var(--wd-muted, #5A6685);
  --wdo-blue: var(--wd-blue, #2A41E8);
  --wdo-blue-dark: var(--wd-blue-dark, #1E31C0);
  --wdo-bg: #F7F9FD;
  --wdo-card-line: #E7EBF4;
  --wdo-line: #EEF1F8;
  --wdo-field-line: #E9EDF6;
  --wdo-head: 82px;   /* en-tête fixe du thème (≥ 1100 px) */
  --wdo-bar: 80px;    /* hauteur de la barre de recherche collante */
  --wdo-max: 1720px;
  --wdo-rail-l: 284px;
  --wdo-rail-r: 320px;
  font-family: var(--wd-font-body, 'IBM Plex Sans', HelveticaNeue, Helvetica, Arial, sans-serif);
  color: var(--wdo-ink-2);
  font-size: 15px;
}
.wdo *, .wdo *::before, .wdo *::after { box-sizing: border-box; }
.wdo a { text-decoration: none; }
.wdo h1, .wdo h2, .wdo h3, .wdo h4, .wdo h5 {
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  color: var(--wdo-ink); margin: 0;
}
/* le thème pose outline:0!important sur a et button : on le rétablit au clavier */
.wdo a:focus-visible, .wdo button:focus-visible,
.wdo input:focus-visible, .wdo select:focus-visible {
  outline: 2px solid var(--wdo-blue) !important; outline-offset: 2px;
}
/* Champs posés DANS un habillage arrondi (pilule de recherche, filtres) : l'anneau
   ne doit pas être dessiné autour du champ nu. Mesuré avant correction sur /offres :
   input 525 x 48 arrondi 4 px à l'intérieur d'un habillage 584 x 52 arrondi 14 px,
   d'où un rectangle qui dépassait de 2 px en haut et en bas et s'arrêtait à 4 px du
   bord droit. La maquette met « outline:none » sur l'input : c'est l'habillage qui
   porte l'anneau, avec le bon arrondi. */
.wdo-field input:focus-visible,
.wdo-num input:focus-visible,
.wdo-select select:focus-visible { outline: none !important; }
.wdo-num:focus-within, .wdo-select:focus-within {
  border-color: var(--wdo-blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(42,65,232,.16);
}

/* ---------- Barre de recherche ---------- */
/* Sam (22/09) : plus de bandeau derrière la barre de recherche. Sans fond opaque,
   elle ne peut plus être collante — les cartes défileraient sous le champ ; elle
   défile donc avec la page, et ce sont les deux colonnes latérales qui collent. */
.wdo-bar {
  position: relative; top: auto; z-index: 1;
  margin-bottom: 24px;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.wdo-bar-in {
  max-width: var(--wdo-max); margin: 0 auto; padding: 14px 20px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch;
}
/* Gouttières invisibles : alignent le champ de recherche sur la colonne du milieu. */
.wdo-bar-rail { flex: 1 1 236px; max-width: min(var(--wdo-rail-l), 100%); height: 0; }
.wdo-bar-rail-r { flex: 1 1 288px; max-width: min(var(--wdo-rail-r), 100%); }
.wdo-search {
  flex: 1 1 480px; min-width: min(460px, 100%); max-width: 820px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
/* .wdo-field est un <label> : le thème force label{display:initial!important;margin-bottom:8px} */
.wdo-field {
  flex: 1 1 120px; min-width: 0; display: flex !important; align-items: center; gap: 10px;
  margin: 0; padding: 0 15px; min-height: 52px; border-radius: 14px;
  background: #fff; border: 1px solid var(--wdo-field-line);   /* Sam : champ « Mot clé » sur fond blanc */
}
.wdo-field:focus-within { border-color: var(--wdo-blue); background: #fff; box-shadow: 0 0 0 3px rgba(42,65,232,.16); }
.wdo-field > svg { flex-shrink: 0; }
.wdo-field input[type="text"] {
  flex: 1; min-width: 0; height: auto; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--wdo-ink);
}
.wdo-field input[type="text"]:focus { border: 0; box-shadow: none; }
.wdo-field input::placeholder { color: #8A96B0; }

/* Bouton principal (Rechercher, CTA) */
.wdo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 22px; min-height: 52px; border: 0; border-radius: 14px;
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 15px; font-weight: 600; white-space: nowrap; color: #fff;
  background: linear-gradient(180deg, #4055F0, #2436CE); cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px rgba(42,65,232,.32);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wdo-btn:hover {
  background: linear-gradient(180deg, #2F45E4, #1B2BB5); color: #fff;
  transform: translateY(-1px); box-shadow: 0 12px 28px rgba(42,65,232,.42);
}
.wdo-btn i { font-size: 18px; }

/* ---------- Gabarit trois colonnes ---------- */
.wdo-main {
  max-width: var(--wdo-max); margin: 0 auto; padding: 0 20px 64px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
}

/* ---------- Colonne de filtres ---------- */
.wdo-filters {
  flex: 1 1 236px; max-width: min(var(--wdo-rail-l), 100%); min-width: 0;
  /* collé sous l'en-tête au défilement ; 14 px = la marge haute de la barre, pour que le panneau ne bouge pas d'un pixel quand la page est en haut */
  position: sticky; top: calc(var(--wdo-head) + 14px);
  padding: 16px 18px 4px; border-radius: 24px; background: #fff;
  border: 1px solid var(--wdo-card-line);
  box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 8px 26px rgba(16,24,48,.06);
}
/* Sam (22/09) : le panneau de filtres remonte au niveau du champ de recherche.
   Il occupe la gouttière gauche de la barre, qui est vide (.wdo-bar-rail) ; le
   décalage vaut la hauteur de la barre (80 px) plus sa marge basse (24 px) moins
   sa marge haute interne (14 px), pour aligner le haut du panneau sur le haut du
   champ. Uniquement là où les trois colonnes existent. */
@media (min-width: 992px) {
  .wdo-filters { margin-top: calc(-1 * (var(--wdo-bar) + 10px)); }
}
.wdo-filters-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
/* « Filtres » n'est pas un titre de page : on garde exactement les h1/h2 d'avant pour le référencement */
.wdo-filters-title {
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--wdo-ink);
}
.wdo-reset {
  border: 0; background: transparent; padding: 0;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--wdo-blue); cursor: pointer;
}
.wdo-reset:hover { color: var(--wdo-blue-dark); }
.wdo-fgroup { padding: 12px 0; border-top: 1px solid var(--wdo-line); margin: 0; }
.wdo-flabel {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wdo-muted);
}
.wdo-fbody { margin-top: 8px; position: relative; }

/* Champ générique des filtres (select natif, champ nombre) */
.wdo-select, .wdo-num {
  width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-radius: 13px; background: var(--wdo-bg);
  border: 1px solid var(--wdo-field-line);
}
.wdo-select { padding: 0; position: relative; }
.wdo-select select {
  width: 100%; height: 42px; margin: 0; padding: 0 38px 0 14px;
  border: 0; background: transparent; box-shadow: none; cursor: pointer;
  /* le thème impose line-height:48px : le texte tombait sous le milieu du champ */
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 42px; color: var(--wdo-ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.wdo-select::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%); pointer-events: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6685' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat;
}
.wdo-select select:invalid, .wdo-select select option[value=""] { color: #8A96B0; font-weight: 500; }
.wdo-num input[type="number"] {
  flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; text-align: left;
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 16px; font-weight: 600; color: var(--wdo-ink);
}
.wdo-num input::placeholder { font-family: var(--wd-font-body, inherit); font-weight: 500; color: #8A96B0; }
.wdo-num input[type=number]::-webkit-outer-spin-button,
.wdo-num input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wdo-num input[type=number] { -moz-appearance: textfield; }
.wdo-unit { flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--wdo-muted); white-space: nowrap; }

/* Puces de contrat (cases à cocher réelles : le formulaire reste natif) */
.wdo-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 7px; }
.wdo-chip { margin: 0; cursor: pointer; }
.wdo-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wdo-chip span {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid #E3E8F4; background: #fff; color: var(--wdo-ink-2);
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 13.5px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16,24,48,.04); transition: .16s ease;
}
.wdo-chip:hover span { border-color: #BCC7F7; }
.wdo-chip input:checked + span {
  border-color: var(--wdo-blue); background: var(--wdo-blue); color: #fff;
  box-shadow: 0 8px 18px rgba(42,65,232,.28);
}
.wdo-chip input:focus-visible + span { outline: 2px solid var(--wdo-blue); outline-offset: 2px; }

/* Localisation : habillage du composant bootstrap-select existant (multi-choix + recherche) */
.wdo-filters .bootstrap-select { width: 100% !important; }
.wdo-filters .bootstrap-select > .btn.dropdown-toggle {
  width: 100%; min-height: 42px; padding: 0 32px 0 12px; margin: 0;
  display: flex; align-items: center; text-align: left;
  border-radius: 13px !important; background: var(--wdo-bg) !important;
  border: 1px solid var(--wdo-field-line) !important; box-shadow: none !important;
  font-family: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--wdo-ink) !important;
}
/* le libellé par défaut « Choisir une localisation » doit tenir sans être coupé */
.wdo-filters .bootstrap-select > .btn .filter-option { width: 100%; padding: 0; }
/* même anneau que les autres champs (l'ancien liseré gris clair ne se voyait pas) */
.wdo-filters .bootstrap-select > .btn.dropdown-toggle:focus-visible,
.wdo-filters .bootstrap-select.open > .btn.dropdown-toggle {
  outline: none !important; border-color: var(--wdo-blue) !important;
  background: #fff !important; box-shadow: 0 0 0 3px rgba(42,65,232,.16) !important;
}
.wdo-filters .bootstrap-select > .btn .filter-option { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdo-filters .bootstrap-select > .btn .caret {
  right: 14px; border: 0; width: 15px; height: 15px; margin-top: -7px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6685' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat;
}
.wdo-filters .bootstrap-select .dropdown-menu {
  margin-top: 8px; padding: 8px; border-radius: 16px; border: 1px solid #E4E8F2;
  box-shadow: 0 20px 44px rgba(16,24,48,.16);
}
.wdo-filters .bootstrap-select .dropdown-menu .inner { max-height: 260px !important; }
.wdo-filters .dropdown-menu > li > a,
.wdo-filters .dropdown-menu li a {
  display: block; padding: 10px 12px; border-radius: 10px; clear: both;
  font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--wdo-ink-2);
}
.wdo-filters .dropdown-menu li.selected > a,
.wdo-filters .dropdown-menu li.active > a { background: #EFF3FF; color: #1245C8; font-weight: 700; }
.wdo-filters .dropdown-header {
  padding: 10px 12px 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wdo-muted);
}
.wdo-filters .bs-searchbox { padding: 4px 4px 8px; }
.wdo-filters .bs-searchbox .form-control {
  height: 40px; border-radius: 11px; background: var(--wdo-bg) !important;
  border: 1px solid var(--wdo-field-line) !important; box-shadow: none !important;
  font-size: 14.5px;
}
/* Pastilles des localisations retenues (injectées par le JS de la page) */
.wdo-filters .selected-values-container {
  min-height: 0; margin: 0 0 8px; padding: 6px; border: 0; border-radius: 12px;
  background: #EFF3FF; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.wdo-filters .selected-badge {
  background: #fff; color: var(--wdo-ink-2); padding: 4px 8px; border-radius: 8px;
  border: 1px solid #D5E3FF; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center;
}
.wdo-filters .remove-badge { margin-left: 6px; cursor: pointer; font-weight: 700; color: var(--wdo-muted); }

/* Bouton « Filtres » du mobile (masqué en bureau) */
.wdo-filters-toggle { display: none; }

/* ---------- Colonne centrale ---------- */
.wdo-list { flex: 1 1 480px; min-width: min(460px, 100%); max-width: 820px; }
/* Filtres instantanés : la liste s'estompe le temps du remplacement (pas de saut de mise en page,
   la hauteur ne change qu'à l'arrivée des nouvelles offres). */
.wdo-list { transition: opacity .14s ease; }
.wdo-list.is-loading { opacity: .45; pointer-events: none; }
/* iOS : bouton de partage masqué par une classe sur <body>, pour survivre au remplacement */
body.wd-ios .wdo-share { display: none !important; }
.wdo-list-head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.wdo-list-head h1 {
  font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2;
}
.wdo-list-head .wdo-results { font-size: 14px; font-weight: 500; color: var(--wdo-muted); }
.wdo-sort { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.wdo-sort-label { font-size: 14px; font-weight: 600; color: var(--wdo-muted); }
.wdo-sort .wdo-select { width: auto; min-height: 38px; border-radius: 11px; background: #fff; border-color: #E3E8F4; box-shadow: 0 1px 2px rgba(16,24,48,.04); }
.wdo-sort .wdo-select select {
  height: 38px; line-height: 38px; padding: 0 34px 0 14px;
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif); font-size: 14px;
}
.wdo-sort .wdo-select::after { right: 12px; width: 14px; height: 14px; background-size: 14px; }

.wdo-cards { margin-top: 18px; display: grid; gap: 14px; }
.wdo-cards .highlight-container { display: grid; gap: 14px; }

/* ---------- Carte d'offre ---------- */
.wdo-card {
  position: relative; padding: 22px 24px; border-radius: 22px; background: #fff;
  border: 1px solid var(--wdo-card-line);
  box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 6px 20px rgba(16,24,48,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wdo-card:hover {
  border-color: #C2CDFA; transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 20px 44px rgba(16,24,48,.11);
}
/* Liseré des offres mises en avant */
.wdo-card-flag {
  position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #2A41E8, #5B6FF0);
}
.wdo-card-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.wdo-logo {
  flex-shrink: 0; width: 84px; height: 84px; padding: 6px; border-radius: 18px;
  overflow: hidden; background: #fff; border: 1px solid #EAEEF7;
  display: flex; align-items: center; justify-content: center;
}
.wdo-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; }
.wdo-card-main { flex: 1 1 240px; min-width: 0; }
.wdo-card-title {
  font-size: 19.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wdo-card-title a { color: var(--wdo-ink); }
.wdo-card:hover .wdo-card-title a { color: var(--wdo-blue); }
/* Toute la carte est cliquable via le lien du titre (pas de JS, lien réel pour les robots) */
.wdo-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.wdo-card-company { margin-top: 5px; font-size: 14.5px; font-weight: 600; color: var(--wdo-ink-2); font-family: inherit; }
.wdo-card-text {
  margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--wdo-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wdo-card-aside {
  flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 12px;
}
.wdo-actions { position: relative; z-index: 1; display: flex; gap: 8px; }
.wdo-share, .wdo .wdo-fav {
  width: 36px; height: 36px; flex-shrink: 0; padding: 0; margin: 0;
  display: flex !important; align-items: center; justify-content: center;
  border-radius: 12px; cursor: pointer; position: static !important; transform: none !important;
  transition: .16s ease;
}
.wdo-share { border: 1px solid #C9EBD4; background: #EEFBF2; color: #1FA855; }
.wdo-share:hover {
  border-color: #25D366; background: #25D366; color: #fff;
  transform: translateY(-1px) !important; box-shadow: 0 8px 18px rgba(31,168,85,.32);
}
.wdo .wdo-fav { border: 1px solid var(--wdo-field-line); background: var(--wdo-bg); color: var(--wdo-muted); }
.wdo .wdo-fav::before { content: none !important; }  /* neutralise le glyphe du thème */
.wdo .wdo-fav:hover { border-color: #F5C86B; background: #FFF7E6; color: #B07800; }
.wdo .wdo-fav.bookmarked { border-color: #F5C86B; background: #FFF7E6; color: #B07800; }
.wdo .wdo-fav.bookmarked svg { fill: currentColor; }

.wdo-money { display: grid; gap: 10px; text-align: right; }
.wdo-money > div + div { padding-top: 10px; border-top: 1px solid var(--wdo-line); }
.wdo-money-label {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wdo-muted);
}
.wdo-money-label i { font-size: 14px; color: var(--wdo-blue); }
.wdo-money-value {
  margin-top: 2px; font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 16px; font-weight: 600; color: var(--wdo-ink-2); white-space: nowrap;
}
.wdo-money-value.is-strong {
  font-size: 21px; font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(140deg, #1E31C0, #5B6FF0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Pied de carte : date, badge Vue, contrats, lieu, télétravail */
.wdo-meta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wdo-line);
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
}
.wdo-meta-date { font-size: 13.5px; font-weight: 600; color: var(--wdo-muted); white-space: nowrap; }
.wdo-meta-sep { width: 1px; height: 18px; background: #E9EDF6; }
.wdo-seen {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px;
  border-radius: 999px; background: #0E7A4D; color: #fff;
  font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 12px rgba(14,122,77,.28);
}
.wdo-seen i { font-size: 14px; color: #fff; }
.wdo-pill {
  padding: 5px 12px; border-radius: 999px; background: #F2F7FF; border: 1px solid #D5E3FF;
  font-size: 12.5px; font-weight: 700; color: #1245C8; white-space: nowrap;
}
.wdo-pill.is-free { background: #EFFAFD; border-color: #C7E9F4; color: #0B6E8C; }
.wdo-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--wdo-ink-2);
}
.wdo-meta-item i { font-size: 16px; color: var(--wdo-blue); }

/* ---------- Bandeau « Formez-vous » ---------- */
.wdo-promo {
  position: relative; overflow: hidden; padding: 24px 26px; border-radius: 22px;
  background: linear-gradient(140deg, #1B2BB5 0%, #2A41E8 52%, #4F86F5 100%);
  box-shadow: 0 16px 40px rgba(42,65,232,.26);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.wdo-promo-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
}
.wdo-promo-text { position: relative; flex: 1 1 260px; min-width: 0; }
.wdo-promo-text h3 {
  font-size: 19.5px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.3;
  text-transform: none;
}
.wdo-promo-text p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: #DDE5FF; }
.wdo-promo-cta {
  position: relative; flex-shrink: 0; padding: 13px 24px; border-radius: 14px;
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 15px; font-weight: 600; color: #1B2BB5; background: #fff;
  box-shadow: 0 10px 24px rgba(9,14,32,.22); transition: .18s ease;
}
.wdo-promo-cta:hover { color: #1B2BB5; background: #F2F5FF; transform: translateY(-2px); }

/* ---------- État « aucun résultat » ---------- */
.wdo-empty {
  margin-top: 14px; padding: 18px 20px; border-radius: 18px; background: #fff;
  border: 1px solid var(--wdo-card-line); display: flex; gap: 12px; align-items: flex-start;
}
.wdo-empty i { font-size: 22px; color: var(--wdo-blue); }
.wdo-empty p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wdo-ink-2); }
.wdo-empty strong { color: var(--wdo-ink); font-weight: 700; }

/* ---------- Pagination ---------- */
.wdo-pager {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 7px;
  align-items: center; justify-content: center;
}
.wdo-pager a, .wdo-pager span {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 11px; border-radius: 12px;
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 14.5px; font-weight: 600; color: var(--wdo-ink-2);
  background: #fff; border: 1px solid #E3E8F4; box-shadow: 0 1px 2px rgba(16,24,48,.04);
  transition: .16s ease;
}
.wdo-pager a:hover { border-color: #BCC7F7; color: var(--wdo-blue); transform: translateY(-1px); }
.wdo-pager .wdo-pager-current {
  color: #fff; background: linear-gradient(180deg, #4055F0, #2436CE); border: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 18px rgba(42,65,232,.3);
}
.wdo-pager .wdo-pager-gap { border: 0; background: transparent; box-shadow: none; color: var(--wdo-muted); min-width: 0; padding: 0 6px; }
.wdo-pager .wdo-pager-arrow { padding: 0 16px; }
.wdo-pager i { font-size: 20px; }

/* ---------- Bouton d'alerte ---------- */
/* Le bouton d'alerte est dans la colonne de droite, juste au-dessus de l'appel à l'action. */
.wdo-alert-wrap { margin-bottom: 14px; display: flex; }
.wdo .wdo-alert {
  display: inline-flex; align-items: center; gap: 12px; width: 100%;
  max-width: 100%; padding: 15px 20px 15px 16px; border-radius: 999px;
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 15.5px; font-weight: 600; color: #fff; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #4055F0, #2436CE);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 14px 34px rgba(42,65,232,.45);
  transition: .18s ease;
}
.wdo .wdo-alert:hover { background: linear-gradient(180deg, #2F45E4, #1B2BB5); color: #fff; transform: translateY(-1px); }
.wdo-alert-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
}
.wdo-alert-ico i { font-size: 18px; color: #fff; }
.wdo-alert-txt { min-width: 0; }
.wdo-alert-txt b { display: block; line-height: 1.2; font-weight: 600; }
.wdo-alert-txt span {
  display: block; margin-top: 2px; font-family: var(--wd-font-body, inherit);
  font-size: 12.5px; font-weight: 500; color: #C9D3FF; line-height: 1.2;
}
.wdo .wdo-alert.is-done {
  background: #fff; color: var(--wdo-ink-2); cursor: default; pointer-events: none;
  border: 1px solid var(--wdo-card-line); box-shadow: 0 8px 22px rgba(16,24,48,.1);
}
.wdo .wdo-alert.is-done .wdo-alert-ico { background: #E8F7EE; }
.wdo .wdo-alert.is-done .wdo-alert-ico i { color: #0E7A4D; }

/* ---------- Colonne de droite ---------- */
.wdo-side {
  flex: 1 1 288px; max-width: min(var(--wdo-rail-r), 100%); min-width: 0;
  position: sticky; top: calc(var(--wdo-head) + 16px);
}
.wdo-side-card {
  position: relative; overflow: hidden; border-radius: 22px; background: #0F1836;
  box-shadow: 0 18px 44px rgba(15,24,54,.22);
}
.wdo-side-media { position: relative; height: 132px; background: #1A2450; }
.wdo-side-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.wdo-side-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,24,54,.18), rgba(15,24,54,.9));
}
.wdo-side-body { padding: 20px 22px 24px; display: grid; gap: 12px; }
.wdo-side-body h3 {
  font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.02em;
  line-height: 1.28; text-transform: none;
}
.wdo-side-item { display: flex; gap: 11px; align-items: flex-start; }
.wdo-side-item svg { flex-shrink: 0; margin-top: 2px; }
.wdo-side-item span { font-size: 14.5px; font-weight: 600; color: #DDE5FF; line-height: 1.45; }
.wdo-side-cta {
  margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: 14px;
  font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
  font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #4055F0, #2436CE);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 24px rgba(42,65,232,.4);
  transition: .18s ease;
}
.wdo-side-cta:hover { background: linear-gradient(180deg, #2F45E4, #1B2BB5); color: #fff; transform: translateY(-1px); }

/* ---------- Texte de référencement sous la liste ---------- */
.wdo-seo { max-width: var(--wdo-max); margin: 0 auto; padding: 0 20px 56px; }
.wdo-seo-in {
  max-width: 1120px; padding: 28px 30px; border-radius: 24px; background: #fff;
  border: 1px solid var(--wdo-card-line); box-shadow: 0 1px 2px rgba(16,24,48,.04), 0 8px 26px rgba(16,24,48,.05);
}
.wdo-seo-img { margin-bottom: 22px; border-radius: 18px; overflow: hidden; }
.wdo-seo-img img { width: 100%; height: auto; display: block; }
.wdo-seo .blog-post-content { font-size: 15.5px; line-height: 1.7; color: var(--wdo-ink-2); }
.wdo-seo .blog-post-content h2 { font-size: 22px; font-weight: 700; margin: 26px 0 10px; }
.wdo-seo .blog-post-content h3 {
  color: var(--wdo-ink) !important; font-size: 19px !important; font-weight: 700;
  margin: 20px 0 8px; display: inline-block;
  text-decoration: underline; text-decoration-color: var(--wdo-blue); text-underline-position: under;
}
.wdo-seo .blog-post-content ol, .wdo-seo .blog-post-content ul { margin: 0 0 0 20px !important; }
.wdo-seo .blog-post-content p { margin: 0 0 14px; }
.wdo-seo .share-buttons { margin-top: 22px; }

/* ---------- Pop-up « Rejoignez-nous » : socle repris de l'ancienne page ---------- */
/* (l'habillage est dans css/join-popup-2026.css ; ici seulement position / affichage / plan) */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  justify-content: center; align-items: center; z-index: 1000;
}
/* En-tête net et cliquable au-dessus du voile (demande de Sam du 22/09) */
body.wd-offres #header-container { z-index: 1200 !important; }

/* =====================================================================
   Adaptations
   ===================================================================== */

/* Sous 1100 px le thème rend l'en-tête non fixe : la barre colle en haut. */
@media (max-width: 1099px) {
  .wdo { --wdo-head: 0px; }
}

/* Deux colonnes : la promo passe sous la liste */
@media (max-width: 1199px) {
  .wdo-main { gap: 14px; }
  .wdo-list { max-width: none; }
  .wdo-side { flex: 1 1 100%; max-width: none; position: static; }
  .wdo-side-card { display: flex; flex-wrap: wrap; }
  .wdo-side-media { flex: 1 1 240px; height: auto; min-height: 150px; }
  .wdo-side-body { flex: 2 1 420px; }
  .wdo-bar-rail-r { display: none; }
}

/* Une colonne : les filtres deviennent un panneau dépliable */
@media (max-width: 991px) {
  .wdo-bar-in { padding: 12px 16px; gap: 10px; }
  .wdo-bar-rail { display: none; }
  .wdo-search { flex: 1 1 100%; min-width: 0; max-width: none; }
  .wdo-main { padding: 0 16px 48px; }
  .wdo-filters {
    flex: 1 1 100%; max-width: none; position: static; max-height: none; overflow: visible;
    padding: 14px 16px; border-radius: 18px;
  }
  .wdo-filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
    font-family: var(--wd-font-head, 'Space Grotesk', sans-serif);
    font-size: 16px; font-weight: 700; color: var(--wdo-ink);
  }
  .wdo-filters-toggle::after {
    content: ""; width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s ease;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6685' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;
  }
  .wdo-filters.is-open .wdo-filters-toggle::after { transform: rotate(180deg); }
  .wdo-filters-head { display: none; }
  .wdo-filters-body { display: none; }
  .wdo-filters.is-open .wdo-filters-body { display: block; }
  .wdo-filters.is-open .wdo-filters-head { display: flex; padding-top: 14px; }
  .wdo-list { flex: 1 1 100%; min-width: 0; }
  /* la colonne de droite passe en bas de page : le bouton d'alerte reste flottant, comme avant,
     et sous la modale (z-index 1000) pour être flouté avec la page */
  .wdo-alert-wrap {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999;
    margin: 0; justify-content: center; pointer-events: none;
  }
  .wdo .wdo-alert { width: auto; pointer-events: auto; }
}

/* Téléphone */
@media (max-width: 767px) {
  .wdo-card { padding: 18px 16px; border-radius: 18px; }
  .wdo-card-top { gap: 12px; }
  .wdo-logo { width: 60px; height: 60px; border-radius: 14px; padding: 4px; }
  .wdo-card-title { font-size: 17.5px; }
  .wdo-card-text { -webkit-line-clamp: 3; }
  .wdo-card-aside {
    flex: 1 1 100%; margin-left: 0; flex-direction: row-reverse; align-items: center;
    justify-content: space-between; gap: 10px; width: 100%;
  }
  .wdo-money { grid-auto-flow: column; gap: 16px; text-align: left; align-items: end; }
  .wdo-money > div + div { padding-top: 0; padding-left: 16px; border-top: 0; border-left: 1px solid var(--wdo-line); }
  .wdo-money-label { justify-content: flex-start; }
  .wdo-money-value.is-strong { font-size: 19px; }
  .wdo-meta { margin-top: 14px; gap: 7px; }
  .wdo-meta-sep { display: none; }
  .wdo-promo { padding: 20px; }
  .wdo-promo-text h3 { font-size: 17.5px; }
  .wdo-promo-cta { width: 100%; text-align: center; }
  .wdo-list-head h1 { font-size: 22px; }
  .wdo-sort { margin-left: 0; width: 100%; }
  .wdo-sort .wdo-select { flex: 1; }
  .wdo-alert-wrap { justify-content: center; bottom: 16px; }
  .wdo .wdo-alert { padding: 12px 18px 12px 14px; font-size: 14.5px; }
  .wdo-seo { padding: 0 16px 40px; }
  .wdo-seo-in { padding: 20px 18px; border-radius: 18px; }
}

@media (max-width: 480px) {
  /* T.J.M et salaire l'un sous l'autre, boutons toujours sur la même ligne à droite */
  .wdo-money { grid-auto-flow: row; gap: 6px; }
  .wdo-money > div + div { padding-left: 0; border-left: 0; padding-top: 6px; border-top: 1px solid var(--wdo-line); }
  .wdo-card-aside { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .wdo * { transition: none !important; }
  .wdo-card:hover { transform: none; }
}