/* ══════════════════════════════════════════════════════════════════════
   Whileresume — Design system
   ══════════════════════════════════════════════════════════════════════

   Montserrat · violet #8A63C1 · fond #FBFCFE

   TROIS RÈGLES QUI STRUCTURENT TOUT LE RESTE

   1. FOND UNIFIÉ. Pas d'alternance de sections claires et sombres :
      #FBFCFE partout. Les sections se séparent par un filet dégradé de
      80px, pas par un changement de couleur. C'est ce qui donne cette
      impression de continuité.

   2. UNE SEULE COULEUR D'ACTION. Tous les CTA primaires sont violets.
      Jamais deux couleurs de bouton sur une même page — sinon on ne sait
      plus lequel est le principal.

   3. PAS DE NOIR PUR. L'encre est #1E1B2E. Le seul noir autorisé est
      celui de la pilule de connexion du header (#111), et c'est
      volontaire : elle doit trancher.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fonds ── */
  --wr-bg: #FBFCFE;          /* le fond du site. Jamais blanc pur. */
  --wr-bg-2: #F4F6FB;        /* zones légèrement en retrait */
  --wr-card: #FFFFFF;        /* les cards, elles, sont blanches */

  /* ── Violet ── */
  --wr-violet: #8A63C1;
  --wr-violet-2: #A98AD3;    /* clair — bords au hover */
  --wr-violet-dark: #6B47A6; /* hover des CTA */
  --wr-violet-soft: #F2EDFA; /* fond des chips, eyebrows */
  --wr-violet-softer: #F8F4FD;

  /* ── Encre ── */
  --wr-ink: #1E1B2E;         /* titres, texte fort */
  --wr-ink-2: #374151;       /* corps de texte */
  --wr-muted: #6B7280;       /* meta, secondaire */
  --wr-muted-2: #9CA3AF;     /* très secondaire */

  /* ── Lignes ── */
  --wr-line: #EEF1F7;        /* bords de card */
  --wr-line-2: #E5E9F0;      /* séparateurs, filets */

  /* ── Ombres ──
     Au repos, quasi invisibles. Au hover, teintées violet — c'est ce
     qui donne l'impression que l'élément « s'allume ». */
  --wr-shadow: 0 1px 2px rgba(30, 27, 46, .04), 0 4px 16px rgba(30, 27, 46, .04);
  --wr-shadow-hover: 0 4px 8px rgba(138, 99, 192, .08), 0 12px 32px rgba(138, 99, 192, .1);

  /* ── Sémantique ── */
  --wr-success: #10B981;
  --wr-danger: #EF4444;
  --wr-warning: #F59E0B;
  --wr-info: #3B82F6;

  /* ── Crème ──
     La seule rupture chromatique autorisée. Réservée au storytelling
     (« comment ça marche »), toujours en card arrondie, jamais en pleine
     largeur. */
  --wr-cream: #F4ECE1;
  --wr-cream-2: #F5EDE3;

  /* ── Cycle d'accents ──
     Pour les logos-lettre. Sept teintes qui tournent selon l'index :
     deux entreprises voisines n'ont jamais la même couleur. */
  --wr-acc-yellow: #FEF3C7;  --wr-acc-yellow-fg: #B45309;
  --wr-acc-green:  #D1FAE5;  --wr-acc-green-fg:  #047857;
  --wr-acc-pink:   #FCE7F3;  --wr-acc-pink-fg:   #BE185D;
  --wr-acc-blue:   #DBEAFE;  --wr-acc-blue-fg:   #1E40AF;
  --wr-acc-orange: #FED7AA;  --wr-acc-orange-fg: #C2410C;
  --wr-acc-violet: #EDE9FE;  --wr-acc-violet-fg: #6D28D9;
  --wr-acc-cyan:   #CFFAFE;  --wr-acc-cyan-fg:   #0E7490;

  /* ── Rayons ── */
  --wr-r-xs: 6px;      /* kbd, micro-éléments */
  --wr-r-sm: 10px;     /* inputs, petits boutons */
  --wr-r-md: 12px;     /* boutons, logos 50px */
  --wr-r-lg: 14px;     /* cards de liste */
  --wr-r-xl: 18px;     /* cards moyennes */
  --wr-r-2xl: 20px;    /* path-cards */
  --wr-r-3xl: 24px;    /* card crème */
  --wr-r-4xl: 28px;    /* CTA final */
  --wr-r-5xl: 32px;    /* card d'inscription */
  --wr-r-pill: 100px;

  /* ── Typographie ── */
  --wr-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wr-mono: 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ── Transitions ──
     Courtes. Une transition de 300ms sur un bouton donne l'impression
     que l'interface traîne. */
  --wr-t: .15s;
  --wr-t-slow: .8s cubic-bezier(.2, .7, .2, 1);

  /* ── Conteneur ── */
  --wr-container: 1200px;
  --wr-container-list: 880px;  /* annuaires : plus étroit, plus lisible */
}

/* ══════════════════════════════════════════════════════════════════
   POLICES CJK

   Montserrat n'embarque aucun idéogramme. Sans ces deux règles, le
   navigateur retombe sur une police système au premier caractère chinois
   ou japonais : ça reste lisible, mais la ligne de base saute au milieu
   d'une phrase mixte (« Whileresume に登録 ») et l'interlettrage part.

   On redéfinit la VARIABLE plutôt que `font-family` sur `body` : toutes
   les règles du site consomment `var(--wr-font)`, la substitution se
   propage donc partout, y compris dans les composants qui redéclarent
   leur propre `font-family`.

   `html:lang(zh)` (0,1,1) l'emporte sur `:root` (0,1,0) — même élément,
   spécificité supérieure. L'attribut est déjà posé par le middleware de
   locale : `<html lang="<%= locale %>">`.

   Les polices citées sont celles des systèmes ; `Noto Sans SC/JP` sert de
   filet si le site les charge un jour. Rien à installer côté serveur.
   ══════════════════════════════════════════════════════════════════ */

html:lang(zh) {
  --wr-font: 'Montserrat', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei',
             'Hiragino Sans GB', -apple-system, sans-serif;
}

html:lang(ja) {
  --wr-font: 'Montserrat', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
             'Yu Gothic', 'Meiryo', -apple-system, sans-serif;
}

/* Les kanas et kanji ont un œil plus grand que les latines à taille égale :
   sans ce demi-point de moins, le japonais paraît zoomé face au reste de la
   maquette.

   ⚠️  La règle vise `body` et non `html`. `body` fixe `font-size: 15px` en
       absolu quelques lignes plus bas — un pourcentage posé sur `html` ne
       cascaderait pas jusqu'ici, il serait simplement écrasé. */
html:lang(ja) body { font-size: 14.5px; }

/* Pas de césure automatique en CJK — le navigateur coupe déjà entre
   idéogrammes. `word-break: normal` évite qu'un mot latin isolé (un nom
   de marque, une URL) soit tranché n'importe où. */
html:lang(zh) body,
html:lang(ja) body { word-break: normal; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--wr-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wr-ink-2);
  background: var(--wr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

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

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

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHIE
   ══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--wr-ink);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Emphase dans les titres : violet, jamais italique, jamais souligné.
   `<em>` est détourné de son sens sémantique — c'est assumé, c'est la
   convention de la charte. */
h1 em, h2 em, h3 em, .wr-h1 em, .wr-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--wr-violet);
}

/* ── Hero ── */
.wr-h1 {
  font-size: 57px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.045em;
  color: var(--wr-ink);
}

/* ── Titre de section ── */
.wr-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--wr-ink);
}

.wr-title--sm {
  font-size: 30px;
  letter-spacing: -.02em;
}

/* ── Lede ──
   Le paragraphe qui suit un titre. Limité à 680px : au-delà, l'œil se
   perd en revenant à la ligne. */
.wr-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--wr-ink-2);
  max-width: 680px;
}

.wr-muted { color: var(--wr-muted); }
.wr-meta {
  font-size: 12.5px;
  color: var(--wr-muted);
  font-weight: 400;
}

@media (max-width: 991px) {
  .wr-h1 { font-size: 40px; }
  .wr-title { font-size: 34px; }
}

@media (max-width: 540px) {
  body { font-size: 14px; }
  .wr-h1 { font-size: 24px; }
  .wr-title { font-size: 28px; }
  .wr-title--sm { font-size: 24px; }
  .wr-lede { font-size: 15px; }
  .wr-meta { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════ */

.wr-container {
  max-width: var(--wr-container);
  margin-inline: auto;
  padding-inline: 32px;
}

/* Les annuaires sont plus étroits : une liste de 1200px de large force
   l'œil à balayer horizontalement pour rien. */
.wr-container--list { max-width: var(--wr-container-list); }

.wr-section { padding: 80px 0; }
.wr-section--tight { padding: 48px 0; }

@media (max-width: 540px) {
  .wr-container { padding-inline: 20px; }
  .wr-section { padding: 56px 0; }
  .wr-section--tight { padding: 36px 0; }
}

/* ── Le filet de séparation ──────────────────────────────────────
   Ce qui remplace l'alternance de fonds. Un dégradé de 80px, centré,
   qui s'évanouit aux extrémités. Discret mais suffisant pour marquer
   une rupture. */
.wr-rule {
  width: 80px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--wr-line-2), transparent);
}

/* ══════════════════════════════════════════════════════════════════
   EYEBROW
   La pilule au-dessus des titres de section. Le point pulse dans les
   heros, pas ailleurs — sinon c'est du bruit.
   ══════════════════════════════════════════════════════════════════ */

.wr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wr-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wr-violet);
  flex-shrink: 0;
}

/* Le point ne pulse QUE dans le hero. Une pastille qui clignote dans
   chaque section, c'est épuisant. */
.wr-hero .wr-eyebrow__dot {
  animation: wrPulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════
   BOUTONS
   ══════════════════════════════════════════════════════════════════ */

.wr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--wr-t), transform var(--wr-t), box-shadow var(--wr-t), border-color var(--wr-t), color var(--wr-t);
  white-space: nowrap;
}

.wr-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* La flèche interne glisse au hover. Détail minuscule, mais c'est ce
   qui fait qu'un bouton semble « répondre ». */
.wr-btn:hover svg.wr-arrow { transform: translateX(3px); }
.wr-btn svg.wr-arrow { transition: transform var(--wr-t); }

/* ── Primaire ── */
.wr-btn--primary {
  background: var(--wr-violet);
  border-color: var(--wr-violet);
  color: #fff;
  box-shadow: 0 4px 14px rgba(138, 99, 193, .32);
}
.wr-btn--primary:hover {
  background: var(--wr-violet-dark);
  border-color: var(--wr-violet-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(138, 99, 193, .4);
}

/* ── Secondaire ── */
.wr-btn--secondary {
  background: var(--wr-card);
  border-color: #E5E7EB;
  color: var(--wr-ink);
}
.wr-btn--secondary:hover {
  border-color: var(--wr-violet-2);
  color: var(--wr-violet);
  transform: translateY(-1px);
}

/* ── Sombre ──
   Réservé aux boutons de navigation (précédent/suivant). */
.wr-btn--dark {
  background: var(--wr-ink);
  border-color: var(--wr-ink);
  color: #fff;
}
.wr-btn--dark:hover { filter: brightness(1.5); }

/* ── Fantôme pointillé ──
   « Voir plus », « Tout effacer ». Le pointillé dit : ce n'est pas
   l'action principale. */
.wr-btn--ghost {
  background: transparent;
  border: 1px dashed rgba(138, 99, 192, .35);
  color: var(--wr-violet);
  border-radius: var(--wr-r-pill);
  font-weight: 600;
}
.wr-btn--ghost:hover {
  background: var(--wr-violet-soft);
  border-style: solid;
  border-color: var(--wr-violet);
}

/* ── Pilule noire ──
   La connexion, dans le header. SEUL usage du noir dans toute la charte.
   C'est ce qui la fait ressortir sur un fond entièrement pastel. */
.wr-btn--pill {
  background: #111;
  border-color: #111;
  color: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
}
.wr-btn--pill:hover {
  background: #2C2C46;
  border-color: #2C2C46;
  transform: translateY(-1px);
}

/* ── Tailles ── */
.wr-btn--lg { padding: 13px 24px; font-size: 14px; border-radius: 12px; }
.wr-btn--sm { padding: 8px 14px; font-size: 12.5px; border-radius: var(--wr-r-sm); }
.wr-btn--block { width: 100%; }

/* ── Lien flèche ──
   « Voir tout ». Discret, aligné à droite des titres de section. */
.wr-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wr-violet);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color var(--wr-t), transform var(--wr-t);
}
.wr-link svg { width: 11px; height: 11px; transition: transform var(--wr-t); }
.wr-link:hover { color: var(--wr-violet-dark); }
.wr-link:hover svg { transform: translateX(2px); }

/* Sur mobile, les groupes de CTA passent en colonne. Deux boutons côte
   à côte sur 320px, ça donne deux boutons illisibles. */
@media (max-width: 540px) {
  .wr-btn-group {
    flex-direction: column;
    width: 100%;
  }
  .wr-btn-group .wr-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════ */

.wr-card {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  box-shadow: var(--wr-shadow);
  transition: transform var(--wr-t), box-shadow var(--wr-t), border-color var(--wr-t);
}

/* Le hover : la card se soulève et son ombre devient violette. C'est le
   geste signature de la charte — on le retrouve partout. */
.wr-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--wr-shadow-hover);
  border-color: var(--wr-violet-2);
}

.wr-card__body { padding: 24px; }

/* ── Card crème ──
   Le storytelling. Toujours arrondie, toujours posée sur le fond —
   jamais en pleine largeur, sinon elle écrase la page. */
.wr-card--cream {
  background: var(--wr-cream);
  border: 0;
  border-radius: var(--wr-r-3xl);
  position: relative;
  overflow: hidden;
}

/* ── CTA final ──
   Le dégradé violet, en bas de page. Contient deux sous-cards blanches :
   un parcours candidat, un parcours recruteur. */
.wr-card--cta {
  background: linear-gradient(135deg, #8A63C0, #9D7BCC);
  border: 0;
  border-radius: var(--wr-r-4xl);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wr-card--cta h2, .wr-card--cta .wr-title { color: #fff; }
.wr-card--cta .wr-lede { color: rgba(255, 255, 255, .85); }

/* ══════════════════════════════════════════════════════════════════
   CHIPS & PILLS
   ══════════════════════════════════════════════════════════════════ */

.wr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--wr-r-pill);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--wr-t);
  cursor: pointer;
  white-space: nowrap;
}

/* Violette : mots-clés, suggestions */
.wr-chip--violet {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}
.wr-chip--violet:hover {
  border-color: rgba(138, 99, 192, .2);
  transform: translateY(-1px);
}

/* Blanche : filtres. Devient violette au survol — on voit qu'elle est
   cliquable avant de cliquer. */
.wr-chip--white {
  background: var(--wr-card);
  color: var(--wr-ink-2);
  border-color: #E5E7EB;
}
.wr-chip--white:hover {
  background: var(--wr-violet-soft);
  border-color: var(--wr-violet-2);
  color: var(--wr-violet);
  transform: translateY(-1px);
}

/* Active : le filtre sélectionné */
.wr-chip--active {
  background: var(--wr-violet);
  color: #fff;
  border-color: var(--wr-violet);
}
.wr-chip--active:hover {
  background: var(--wr-violet-dark);
  border-color: var(--wr-violet-dark);
}

/* Perk : un avantage, avec sa coche verte */
.wr-chip--perk {
  background: var(--wr-card);
  color: var(--wr-ink-2);
  border-color: var(--wr-line-2);
  font-size: 12px;
  font-weight: 600;
  cursor: default;
}
.wr-chip--perk svg { width: 13px; height: 13px; color: var(--wr-success); }

/* Badge salaire : à droite des rangées d'offres */
.wr-badge-salary {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════ */

.wr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--wr-r-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.wr-badge svg { width: 11px; height: 11px; }

.wr-badge--violet  { background: var(--wr-violet-soft); color: var(--wr-violet); }
.wr-badge--success { background: #D1FAE5; color: #047857; }
.wr-badge--danger  { background: #FEE2E2; color: #B91C1C; }
.wr-badge--warning { background: #FEF3C7; color: #B45309; }
.wr-badge--info    { background: #DBEAFE; color: #1E40AF; }
.wr-badge--muted   { background: #F3F4F6; color: var(--wr-muted); }

/* ══════════════════════════════════════════════════════════════════
   LOGOS-LETTRE

   Quand une entité n'a pas de logo, on affiche son initiale dans un
   carré coloré. Le cycle de 7 teintes tourne selon la position : deux
   entreprises voisines dans une liste n'ont jamais la même couleur.
   ══════════════════════════════════════════════════════════════════ */

.wr-logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--wr-r-md);
  font-weight: 700;
  overflow: hidden;

  /* Le fallback, hors liste : dégradé violet. */
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
  color: var(--wr-violet);
}

.wr-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.wr-logo--sm { width: 42px; height: 42px; font-size: 15px; }
.wr-logo--md { width: 50px; height: 50px; font-size: 17px; border-radius: var(--wr-r-md); }
.wr-logo--lg { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; }

/* Le cycle. `nth-child(7n+x)` sur le PARENT de la card — la couleur
   dépend de la position dans la liste, pas de l'entité elle-même. */
.wr-cycle > *:nth-child(7n+1) .wr-logo { background: var(--wr-acc-yellow); color: var(--wr-acc-yellow-fg); }
.wr-cycle > *:nth-child(7n+2) .wr-logo { background: var(--wr-acc-green);  color: var(--wr-acc-green-fg); }
.wr-cycle > *:nth-child(7n+3) .wr-logo { background: var(--wr-acc-pink);   color: var(--wr-acc-pink-fg); }
.wr-cycle > *:nth-child(7n+4) .wr-logo { background: var(--wr-acc-blue);   color: var(--wr-acc-blue-fg); }
.wr-cycle > *:nth-child(7n+5) .wr-logo { background: var(--wr-acc-orange); color: var(--wr-acc-orange-fg); }
.wr-cycle > *:nth-child(7n+6) .wr-logo { background: var(--wr-acc-violet); color: var(--wr-acc-violet-fg); }
.wr-cycle > *:nth-child(7n+7) .wr-logo { background: var(--wr-acc-cyan);   color: var(--wr-acc-cyan-fg); }

/* Une card AVEC logo : on retire la couleur de fond, l'image parle. */
.wr-logo:has(img) { background: var(--wr-card); border: 1px solid var(--wr-line); }

/* ══════════════════════════════════════════════════════════════════
   RANGÉE DE LISTE

   Le composant le plus utilisé du site : offres, entreprises, articles.
   Toujours la même structure : logo + info + badge + flèche.

   Pas de grilles de vignettes : une liste se balaye verticalement, et
   une rangée horizontale montre plus d'information au même endroit.
   ══════════════════════════════════════════════════════════════════ */

.wr-list {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  overflow: hidden;
}

.wr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wr-line);
  transition: background var(--wr-t);
  cursor: pointer;
}
.wr-row:last-child { border-bottom: 0; }
.wr-row:hover { background: var(--wr-violet-softer); }

.wr-row__body { flex: 1; min-width: 0; }

.wr-row__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--wr-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--wr-t);
}
.wr-row:hover .wr-row__title { color: var(--wr-violet); }

.wr-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--wr-muted);
  flex-wrap: wrap;
}
.wr-row__meta span { display: inline-flex; align-items: center; gap: 4px; }
.wr-row__meta svg { width: 11px; height: 11px; flex-shrink: 0; }

/* La flèche : glisse et devient violette. C'est ce qui dit « cliquable »
   sans avoir à écrire « voir ». */
.wr-row__arrow {
  color: var(--wr-muted-2);
  flex-shrink: 0;
  transition: transform var(--wr-t), color var(--wr-t);
}
/* La flèche peut être un <svg class="wr-row__arrow"> directement (et pas un
   conteneur). On borne sa taille dans les deux cas, sinon un SVG sans width
   remplit tout l'espace disponible (chevron géant). */
svg.wr-row__arrow { width: 16px; height: 16px; }
.wr-row__arrow svg { width: 16px; height: 16px; }
.wr-row:hover .wr-row__arrow {
  transform: translateX(3px);
  color: var(--wr-violet);
}

@media (max-width: 540px) {
  .wr-row { padding: 12px 14px; gap: 10px; }
  .wr-row__title { font-size: 13px; }
  .wr-row__meta { font-size: 11px; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   FORMULAIRES
   ══════════════════════════════════════════════════════════════════ */

.wr-field { margin-bottom: 16px; }

.wr-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wr-ink);
  margin-bottom: 7px;
}

.wr-label .wr-req { color: var(--wr-danger); margin-left: 2px; }

.wr-input,
.wr-select,
.wr-textarea {
  width: 100%;
  padding: 13px 14px;
  font-size: 14px;
  color: var(--wr-ink);
  background: #FAFBFD;
  border: 1px solid var(--wr-line-2);
  border-radius: 11px;
  transition: border-color var(--wr-t), background var(--wr-t), box-shadow var(--wr-t);
  outline: none;
}

.wr-input::placeholder,
.wr-textarea::placeholder { color: var(--wr-muted-2); }

/* Le focus : le fond passe au blanc, le bord au violet, avec un halo.
   L'input « s'éclaire » — on sait où on est sans avoir à chercher. */
.wr-input:focus,
.wr-select:focus,
.wr-textarea:focus {
  border-color: var(--wr-violet);
  background: var(--wr-card);
  box-shadow: 0 0 0 3px rgba(138, 99, 192, .12);
}

.wr-input.is-error,
.wr-textarea.is-error { border-color: var(--wr-danger); }

.wr-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.wr-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.wr-hint {
  font-size: 12px;
  color: var(--wr-muted);
  margin-top: 6px;
}

.wr-error {
  font-size: 12px;
  color: var(--wr-danger);
  margin-top: 6px;
  font-weight: 500;
}

/* Bloc d'erreur de formulaire */
.wr-alert-error {
  padding: 13px 16px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 12px;
  color: #991B1B;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   CASES À COCHER

   ⚠️  ON DESSINE LA CASE, ON NE LA TEINTE PAS.

   C'était `accent-color: violet` sur la case native : un carré système, gris
   sur macOS, bleu sur Windows, avec une coche dont on ne maîtrise ni la
   forme ni l'épaisseur. Teinter ce qu'on n'a pas dessiné, ce n'est pas du
   design — c'est une excuse.

   `appearance: none` la vide. On la redessine : carré arrondi, bord net,
   violet plein quand elle est cochée, coche blanche en SVG.

   ⚠️  ZÉRO CHANGEMENT DE MARKUP.

   Toutes les cases du site en héritent — « rester connecté », les CGU, les
   filtres du CV. Une case jolie qu'il faut réécrire dans quinze vues, c'est
   quatorze vues qui garderont l'ancienne.

   ⚠️  ON GARDE LE FOCUS VISIBLE.

   Un anneau au clavier. La case native l'avait ; en la vidant, on le perdait.
   Une interface qu'on ne peut plus parcourir au clavier n'est pas « plus
   jolie », elle est cassée.
   ══════════════════════════════════════════════════════════════════ */

.wr-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wr-ink-2);
}

.wr-checkbox input[type="checkbox"],
.wr-checkbox input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;

  width: 19px;
  height: 19px;
  flex: none;
  margin: 1px 0 0;

  border: 1.5px solid var(--wr-line-2);
  border-radius: 6px;
  background: var(--wr-card);
  cursor: pointer;

  display: inline-grid;
  place-content: center;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}

.wr-checkbox input[type="radio"] { border-radius: 50%; }

.wr-checkbox:hover input:not(:checked) { border-color: var(--wr-violet-2); }

/* La coche. En pseudo-élément plutôt qu'en image de fond : elle hérite de la
   couleur, et elle peut s'animer. */
.wr-checkbox input::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform .16s cubic-bezier(.3, 1.4, .5, 1);

  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 41% 100%, 100% 16%, 84% 0, 39% 66%);
}

.wr-checkbox input[type="radio"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  clip-path: none;
}

.wr-checkbox input:checked {
  background: var(--wr-violet);
  border-color: var(--wr-violet);
}

.wr-checkbox input:checked::before { transform: scale(1); }

.wr-checkbox input:active { transform: scale(.92); }

/* Le focus clavier. Il existait sur la case native ; en la vidant, on l'a
   supprimé. On le remet — pas au survol de la souris, seulement au clavier. */
.wr-checkbox input:focus-visible {
  outline: 2px solid var(--wr-violet);
  outline-offset: 2px;
}

/* ── La barre de recherche « dashboard » ──────────────────────────
   Le pattern signature : une carte blanche qui contient l'input. On la
   retrouve sur la home et sur les annuaires. */
.wr-search {
  background: var(--wr-card);
  border-radius: var(--wr-r-lg);
  box-shadow: 0 0 20px rgba(0, 0, 0, .05);
  padding: 10px;
}

.wr-search__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: var(--wr-r-sm);
  transition: border-color var(--wr-t), background var(--wr-t);
}
.wr-search__inner:focus-within {
  border-color: rgba(138, 99, 192, .4);
  background: var(--wr-card);
}

.wr-search__icon {
  width: 16px;
  height: 16px;
  color: var(--wr-muted-2);
  flex-shrink: 0;
}

.wr-search__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.wr-search__clear {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--wr-muted-2);
  display: none;
  place-items: center;
  flex-shrink: 0;
}
.wr-search__clear.is-visible { display: grid; }
.wr-search__clear:hover { background: #F3F4F6; color: var(--wr-ink); }
.wr-search__clear svg { width: 12px; height: 12px; }

/* Le hint clavier : n'apparaît qu'au focus. Sinon c'est du bruit. */
.wr-kbd {
  display: none;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line-2);
  border-radius: var(--wr-r-xs);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wr-muted);
  flex-shrink: 0;
}
.wr-search__inner:focus-within .wr-kbd { display: flex; }

@media (max-width: 540px) {
  .wr-kbd { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ÉTATS
   ══════════════════════════════════════════════════════════════════ */

/* ── Vide ──
   Une liste vide sans explication, c'est un bug pour l'utilisateur.
   On dit ce qui se passe et ce qu'il peut faire. */
.wr-empty {
  text-align: center;
  padding: 48px 20px;
}

.wr-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: var(--wr-r-lg);
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
}
.wr-empty__icon svg { width: 22px; height: 22px; }

.wr-empty__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--wr-ink);
  margin-bottom: 4px;
}

.wr-empty__hint {
  font-size: 13px;
  color: var(--wr-muted);
  margin-bottom: 16px;
}

/* ── Skeleton ──
   Pendant le chargement. Un shimmer qui balaye — ça dit « ça arrive »
   sans faire tourner un spinner qui ne dit rien de la forme du contenu. */
.wr-skel {
  background: linear-gradient(90deg, #F3F4F6 0%, #E5E7EB 50%, #F3F4F6 100%);
  background-size: 200% 100%;
  animation: wrSkel 1.4s ease-in-out infinite;
  border-radius: var(--wr-r-xs);
}

.wr-skel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wr-line);
}
.wr-skel-row__logo { width: 50px; height: 50px; border-radius: var(--wr-r-md); }
.wr-skel-row__lines { flex: 1; }
.wr-skel-row__l1 { height: 14px; width: 60%; margin-bottom: 8px; }
.wr-skel-row__l2 { height: 10px; width: 40%; }

/* ── Spinner ── */
.wr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--wr-violet-soft);
  border-top-color: var(--wr-violet);
  border-radius: 50%;
  animation: wrSpin .7s linear infinite;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

@keyframes wrFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wrPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

@keyframes wrPulse2 {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .4); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes wrSpin { to { transform: rotate(360deg); } }

@keyframes wrSkel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes wrHeartbeat {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.18); }
  20%      { transform: scale(1); }
  30%      { transform: scale(1.12); }
  40%      { transform: scale(1); }
}

@keyframes wrFloat1 {
  0%, 100% { transform: rotate(-6deg) translate(-10px, 0); }
  50%      { transform: rotate(-6deg) translate(-10px, -8px); }
}

/* ── Cascade du hero ──────────────────────────────────────────────
   Les éléments apparaissent l'un après l'autre. Les délais sont
   volontairement espacés : une cascade trop rapide passe inaperçue,
   trop lente et l'utilisateur attend. */
.wr-fade { opacity: 0; animation: wrFadeUp .85s ease forwards; }
.wr-fade--1 { animation-delay: 0s; }
.wr-fade--2 { animation-delay: .15s; }
.wr-fade--3 { animation-delay: .4s; }
.wr-fade--4 { animation-delay: .55s; }
.wr-fade--5 { animation-delay: .7s; }
.wr-fade--6 { animation-delay: .85s; }
.wr-fade--7 { animation-delay: 1s; }
.wr-fade--8 { animation-delay: 1.1s; }

/* ── Reveal au scroll ─────────────────────────────────────────────
   L'IntersectionObserver ajoute `.is-revealed`. Sans JS, tout reste
   visible — c'est le rôle du `no-js` ci-dessous. */
.wr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--wr-t-slow), transform var(--wr-t-slow);
}
.wr-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

.wr-reveal--left  { transform: translateX(-32px); }
.wr-reveal--right { transform: translateX(32px); }
.wr-reveal--scale { transform: scale(.96); }

.wr-reveal[data-reveal-delay="1"] { transition-delay: .08s; }
.wr-reveal[data-reveal-delay="2"] { transition-delay: .16s; }
.wr-reveal[data-reveal-delay="3"] { transition-delay: .24s; }
.wr-reveal[data-reveal-delay="4"] { transition-delay: .32s; }

/* Sans JavaScript, `.is-revealed` n'est jamais posée. Le contenu
   resterait invisible — c'est-à-dire que la page serait vide. On force
   donc la visibilité. */
.no-js .wr-reveal,
.no-js .wr-fade {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ── Mouvement réduit ──
   Certains utilisateurs souffrent de vertiges avec les animations.
   Ce n'est pas une préférence esthétique, c'est un besoin. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .wr-reveal, .wr-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DÉCOR

   Des blobs radiaux violets, très pâles, très flous, dans les coins des
   heros. Jamais d'images photographiques : elles dateraient la page et
   alourdiraient le chargement.
   ══════════════════════════════════════════════════════════════════ */

.wr-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.wr-blob--1 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(138, 99, 193, .14), transparent 70%);
  top: -80px;
  right: -60px;
}

.wr-blob--2 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(169, 138, 211, .09), transparent 70%);
  bottom: -60px;
  left: -40px;
}

/* Tout ce qui est au-dessus du décor */
.wr-above { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════
   UTILITAIRES
   ══════════════════════════════════════════════════════════════════ */

.wr-flex        { display: flex; }
.wr-flex-center { display: flex; align-items: center; justify-content: center; }
.wr-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.wr-items-center{ align-items: center; }
.wr-wrap        { flex-wrap: wrap; }

.wr-gap-1 { gap: 4px; }
.wr-gap-2 { gap: 8px; }
.wr-gap-3 { gap: 12px; }
.wr-gap-4 { gap: 16px; }
.wr-gap-5 { gap: 24px; }

.wr-grid   { display: grid; gap: 18px; }
.wr-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wr-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wr-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) {
  .wr-grid-3, .wr-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wr-grid-2, .wr-grid-3, .wr-grid-4 { grid-template-columns: 1fr; }
}

.wr-text-center { text-align: center; }
.wr-mx-auto     { margin-inline: auto; }
.wr-relative    { position: relative; }

.wr-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wr-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Accessible mais invisible — pour les labels de lecteurs d'écran. */
.wr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : le premier élément focusable de la page. */
.wr-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--wr-violet);
  color: #fff;
  border-radius: var(--wr-r-sm);
  font-weight: 600;
  transition: top var(--wr-t);
}
.wr-skip:focus { top: 16px; }

/* ══════════════════════════════════════════════════════════════════
   PROSE
   Le contenu riche : articles, descriptions d'offres, pages CMS.
   ══════════════════════════════════════════════════════════════════ */

/* ⚠️  `max-width` VIT ICI, ET C'EST LUI QUI BRIDAIT L'ARTICLE.

   `.wr-prose` habille tout le texte long du site : pages CMS, fiches
   d'offre, fiches d'entreprise, portfolio, blocs de contenu — dix écrans.
   Les 720 px sont une mesure de lecture volontaire pour EUX, et les retirer
   ici les élargirait tous d'un coup.

   L'article, lui, est demandé bord à bord. La levée se fait donc juste en
   dessous, sur le seul contexte concerné (`--wide`), plutôt qu'en
   supprimant une règle dont neuf autres écrans dépendent. */
.wr-prose {
  font-size: 15px;
  line-height: 1.75;
  color: var(--wr-ink-2);
  max-width: 720px;
}

/* L'article en pleine largeur : le texte suit la card, sans plafond. */
.wr-container--wide .wr-prose { max-width: none; }

.wr-prose > * + * { margin-top: 1.1em; }

.wr-prose h2 {
  font-size: 24px;
  margin-top: 1.8em;
  letter-spacing: -.02em;
}

.wr-prose h3 {
  font-size: 19px;
  margin-top: 1.5em;
}

.wr-prose ul, .wr-prose ol { padding-left: 1.3em; }
.wr-prose ul { list-style: disc; }
.wr-prose ol { list-style: decimal; }
.wr-prose li { margin-top: .4em; }

.wr-prose a {
  color: var(--wr-violet);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(138, 99, 192, .3);
  text-underline-offset: 2px;
}
.wr-prose a:hover { text-decoration-color: var(--wr-violet); }

.wr-prose strong { font-weight: 700; color: var(--wr-ink); }

.wr-prose blockquote {
  padding: 16px 20px;
  background: var(--wr-violet-softer);
  border-left: 3px solid var(--wr-violet);
  border-radius: 0 var(--wr-r-lg) var(--wr-r-lg) 0;
  font-style: normal;
  color: var(--wr-ink-2);
}

.wr-prose code {
  padding: 2px 6px;
  background: var(--wr-violet-soft);
  border-radius: var(--wr-r-xs);
  font-family: var(--wr-mono);
  font-size: .9em;
  color: var(--wr-violet-dark);
}

.wr-prose img {
  border-radius: var(--wr-r-lg);
  margin-block: 1.5em;
}

/* ══════════════════════════════════════════════════════════════════
   HEADER
   Collant, blanc, discret. Le seul élément noir de la charte est sa
   pilule de connexion — c'est ce qui la fait ressortir.
   ══════════════════════════════════════════════════════════════════ */

.wr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 252, 254, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wr-line);
}

.wr-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;

  /* ⚠️  PLEINE LARGEUR.

     C'était `max-width: var(--wr-container)` + `margin-inline: auto` : le
     contenu du header était centré dans une colonne, avec du vide à gauche et
     à droite sur les grands écrans. Le fond, lui, allait bord à bord — d'où
     l'impression d'un header « qui ne remplit pas ».

     On retire la contrainte : le header occupe toute la largeur, comme sa
     bordure et son fond. Le padding garde le contenu à distance des bords. */
  width: 100%;
  padding-inline: 32px;
}

.wr-logo-link {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.wr-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--wr-r-sm);
  background: var(--wr-violet);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.02em;
  flex-shrink: 0;
}

.wr-logo-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--wr-ink);
  letter-spacing: -.02em;
}

.wr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.wr-nav__link {
  padding: 8px 14px;
  border-radius: var(--wr-r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wr-ink-2);
  transition: background var(--wr-t), color var(--wr-t);
}
.wr-nav__link:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}
.wr-nav__link.is-active { color: var(--wr-violet); }

.wr-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Le compte, quand on est connecté ── */
.wr-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: #F3F4F6;
  transition: background var(--wr-t);
  cursor: pointer;
}
.wr-user:hover { background: #E5E7EB; }

.wr-user__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wr-violet);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.wr-user__avatar img { width: 100%; height: 100%; object-fit: cover; }

.wr-user__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--wr-ink);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Le menu déroulant ── */
.wr-menu { position: relative; }

.wr-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-lg);
  box-shadow: 0 8px 32px rgba(30, 27, 46, .1);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--wr-t);
  z-index: 200;
}
.wr-menu__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wr-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--wr-r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wr-ink-2);
  transition: background var(--wr-t), color var(--wr-t);
  width: 100%;
  text-align: left;
}
.wr-menu__item:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}
.wr-menu__item svg { width: 15px; height: 15px; flex-shrink: 0; }

.wr-menu__sep {
  height: 1px;
  background: var(--wr-line);
  margin: 6px 0;
}

.wr-menu__item--danger { color: var(--wr-danger); }
.wr-menu__item--danger:hover { background: #FEF2F2; color: #B91C1C; }

/* ── Le hamburger ── */
.wr-burger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--wr-r-sm);
  color: var(--wr-ink);
  place-items: center;
  transition: background var(--wr-t);
}
.wr-burger:hover { background: var(--wr-violet-soft); }
.wr-burger svg { width: 20px; height: 20px; }

@media (max-width: 991px) {
  .wr-header__inner { padding-inline: 20px; height: 60px; }
  .wr-nav { display: none; }
  .wr-burger { display: grid; }
  .wr-header__actions { margin-left: auto; }
}

@media (max-width: 480px) {
  .wr-logo-name { display: none; }
  .wr-btn--pill span { display: none; }
  .wr-btn--pill { padding: 9px 11px; }
}

/* ══════════════════════════════════════════════════════════════════
   DRAWER (menu mobile)
   ══════════════════════════════════════════════════════════════════ */

.wr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 46, .4);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
  z-index: 998;
}
.wr-backdrop.is-open { opacity: 1; visibility: visible; }

.wr-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--wr-card);
  z-index: 999;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.wr-drawer.is-open { transform: none; }

.wr-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--wr-line);
  flex-shrink: 0;
}

.wr-drawer__close {
  width: 34px;
  height: 34px;
  border-radius: var(--wr-r-sm);
  color: var(--wr-muted);
  display: grid;
  place-items: center;
}
.wr-drawer__close:hover { background: var(--wr-violet-soft); color: var(--wr-violet); }
.wr-drawer__close svg { width: 18px; height: 18px; }

.wr-drawer__body { padding: 16px; flex: 1; }

.wr-drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--wr-r-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--wr-ink);
  transition: background var(--wr-t), color var(--wr-t);
}
.wr-drawer__link:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}
.wr-drawer__link svg { width: 18px; height: 18px; color: var(--wr-muted); }
.wr-drawer__link:hover svg { color: var(--wr-violet); }

.wr-drawer__foot {
  padding: 16px;
  border-top: 1px solid var(--wr-line);
  display: grid;
  gap: 10px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */

.wr-footer {
  background: var(--wr-card);
  border-top: 1px solid var(--wr-line);
  padding: 56px 0 28px;
  margin-top: 80px;
}

/* Le nombre de colonnes n'est plus figé : il vient du template, qui le
   tient de la base. Ajouter une colonne dans le backoffice ne doit pas
   obliger à toucher au CSS. */
.wr-footer__grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(var(--wr-footer-cols, 3), minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 44px;
}

.wr-footer__brand { min-width: 0; }
.wr-footer__col { min-width: 0; }

.wr-footer__about {
  font-size: 13.5px;
  color: var(--wr-muted);
  line-height: 1.65;
  max-width: 300px;
  margin-top: 14px;
}

.wr-footer__title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-ink);
  margin-bottom: 16px;
}

.wr-footer__list { display: grid; gap: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   ⚠️  MÊME SURVOL QUE LES LIENS DU HEADER.

   Le header pose un fond violet doux et un rayon ; le footer ne changeait
   que la couleur du texte. Deux gestes différents pour la même action, sur
   la même page.

   ⚠️  IL FAUT UN `padding` ET `display: inline-block`.

       Sans eux, le fond épouserait exactement le texte — une pastille
       collée aux lettres, sans air autour. Et sur un lien qui passe à la
       ligne, un `inline` simple découperait le fond en deux morceaux
       décalés.

       Les marges négatives compensent ce padding : sans elles, tous les
       liens se décaleraient de 10px vers la droite et la colonne perdrait
       son alignement — un survol ne doit pas déplacer la mise en page.
   ══════════════════════════════════════════════════════════════════════ */
.wr-footer__link {
  display: inline-block;
  padding: 5px 10px;
  margin: -5px -10px;
  border-radius: var(--wr-r-sm);
  font-size: 13.5px;
  color: var(--wr-muted);
  transition: background var(--wr-t), color var(--wr-t);
}
.wr-footer__link:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}

.wr-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--wr-line);
  font-size: 12.5px;
  color: var(--wr-muted-2);
  flex-wrap: wrap;
}

/* Les liens légaux, en ligne, entre le copyright et la mention. Ils ne
   méritaient pas une colonne entière — mais ils doivent rester
   atteignables depuis chaque page. */
.wr-footer__legal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.wr-footer__legal .wr-footer__link { font-size: 12.5px; }

.wr-footer__sep { color: var(--wr-line-2); }

.wr-footer__note { white-space: nowrap; }

/* ── Puces des stores ──────────────────────────────────────────────
   Pas les visuels officiels (marques déposées, et 2 images de plus à
   charger) : une puce maison, à la charte du site. */

.wr-footer__apps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.wr-store-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--wr-line);
  border-radius: 11px;
  background: var(--wr-card);
  color: var(--wr-ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wr-store-pill:hover {
  border-color: var(--wr-violet-2);
  transform: translateY(-2px);
  box-shadow: var(--wr-shadow-hover);
}

.wr-store-pill svg { flex: none; color: var(--wr-ink); }

.wr-store-pill__over {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wr-muted-2);
  line-height: 1.2;
}

.wr-store-pill__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.wr-socials { display: flex; gap: 8px; }

.wr-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wr-bg-2);
  color: var(--wr-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 0;
  transition: all var(--wr-t);
}
.wr-social:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  transform: translateY(-2px);
}
.wr-social svg {
  width: 17px;
  height: 17px;
  display: block;
}

@media (max-width: 991px) {
  .wr-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 540px) {
  .wr-footer { padding: 40px 0 24px; margin-top: 56px; }
  .wr-footer__grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .wr-footer__col { justify-items: center; }
  .wr-footer__list { justify-items: center; }
  .wr-footer__brand { align-items: center; text-align: center; }
  .wr-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .wr-footer__cta { margin-left: auto; margin-right: auto; }
  .wr-footer__social { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE

   Dans le header. Des LIENS, pas un <select> : un moteur de recherche
   suit les liens, pas les options d'un menu déroulant.

   Chaque lien pointe vers la MÊME page dans l'autre langue (via altUrls),
   pas vers la racine. Perdre sa page en changeant de langue, c'est le
   genre de détail qui fait qu'on ne change plus de langue.
   ══════════════════════════════════════════════════════════════════ */

.wr-lang {
  position: relative;
  flex-shrink: 0;
}

.wr-lang__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: var(--wr-r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--wr-ink-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--wr-t);
}
.wr-lang__btn:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}

/* ⚠️  `.wr-lang__flag` A DISPARU AVEC LES DRAPEAUX.

   Un drapeau désigne un pays, pas une langue : l'Union Jack ignore les
   Américains, le drapeau espagnol ignore l'Amérique latine. Le sélecteur
   affiche désormais le code de langue et son nom écrit dans cette langue.
   La règle est retirée plutôt que laissée à sécher — une classe sans
   élément se transforme vite en « on ne sait plus si c'est utilisé ». */

.wr-lang__code {
  text-transform: uppercase;
  letter-spacing: .02em;
}

.wr-lang__chevron {
  width: 12px;
  height: 12px;
  color: var(--wr-muted-2);
  transition: transform var(--wr-t);
}
.wr-lang.is-open .wr-lang__chevron { transform: rotate(180deg); }

.wr-lang__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-md);
  box-shadow: 0 8px 28px rgba(30, 27, 46, .12);
  padding: 5px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--wr-t);
  z-index: 200;
}
.wr-lang__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wr-lang__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: var(--wr-r-xs);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wr-ink-2);
  transition: background var(--wr-t), color var(--wr-t);
  white-space: nowrap;
}
.wr-lang__item:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}

/* La langue actuelle : violette, avec une coche. On voit où on est sans
   avoir à comparer. */
.wr-lang__item.is-current {
  color: var(--wr-violet);
  font-weight: 600;
}

.wr-lang__check {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--wr-violet);
  flex-shrink: 0;
}

/* Sans JavaScript, le panneau est toujours visible au survol — c'est le
   comportement de repli. Le menu reste utilisable. */
.no-js .wr-lang:hover .wr-lang__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 640px) {
  .wr-lang__code { display: none; }
  .wr-lang__btn { padding: 7px 8px; }
}

/* ── Pied de page : responsive ─────────────────────────────────────
   `--wr-footer-cols` pilote la grille en desktop. En dessous, on ne
   négocie pas : deux colonnes, puis une. La marque passe en pleine
   largeur — elle porte le logo, le texte, les réseaux et les stores. */

@media (max-width: 991px) {
  .wr-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .wr-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .wr-footer__grid { grid-template-columns: 1fr; gap: 28px; }

  .wr-footer__bottom { justify-content: flex-start; }
  .wr-footer__legal { justify-content: flex-start; flex: none; width: 100%; }
  .wr-footer__note { white-space: normal; }

  .wr-footer__apps { width: 100%; }
  .wr-store-pill { flex: 1; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════════════
   L'ÉDITEUR D'AVATAR

   Partagé par la page compte (layout du site) et par l'accueil obligatoire
   (layout du tunnel). Il vit donc dans `wr.css` — la seule feuille que TOUS
   les layouts chargent.

   On clique sur sa tête, pas sur un `<input type="file">` nu : celui-ci est
   laid, et il ne montre pas ce qu'on vient de choisir.
   ══════════════════════════════════════════════════════════════════════ */

/* On clique sur sa tête, pas sur un <input type="file"> nu — qui est laid
   et ne montre pas ce qu'on vient de choisir. */
.wr-avatar-edit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--wr-line);
}

.wr-avatar-edit__pic {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  cursor: pointer;
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.wr-avatar-edit__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.wr-avatar-edit__pic img[hidden] { display: none; }

.wr-avatar-edit__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 27, 46, .5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s ease;
}

.wr-avatar-edit__pic:hover .wr-avatar-edit__overlay { opacity: 1; }

.wr-avatar-edit__name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   CONNEXION SOCIALE
   ══════════════════════════════════════════════════════════════════════ */

.wr-social-login { display: flex; flex-direction: column; gap: 10px; }

.wr-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--wr-line-2);
  border-radius: 12px;
  background: var(--wr-card);
  color: var(--wr-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}

.wr-social__btn:hover {
  border-color: var(--wr-ink-2);
  background: var(--wr-bg-2);
  color: var(--wr-ink);
  transform: translateY(-1px);
}

.wr-social__btn:active { transform: translateY(0); }

.wr-social__btn:focus-visible {
  outline: 2px solid var(--wr-violet);
  outline-offset: 2px;
}

.wr-social__icon { display: inline-flex; flex: none; }

/* Le séparateur : « ou inscrivez-vous à l'ancienne ». Le social login est un
   raccourci, pas un remplacement. */
.wr-social__sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--wr-muted-2);
  font-size: 12.5px;
}

.wr-social__sep::before,
.wr-social__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wr-line);
}

/* Conteneur pleine largeur (utilisé par /jobs) : occupe toute la largeur
   disponible avec une marge de sécurité, au lieu de la colonne étroite. */
.wr-container--wide { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — CARTE COMMUNAUTÉ ET COLONNE DES LANGUES
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️  ENTRE LA GRILLE ET LE COPYRIGHT, DÉTACHÉE DES DEUX.

   Placée dans la grille, la carte serait devenue une colonne de liens parmi
   d'autres. Sur toute la largeur et avec son propre fond, c'est le dernier
   bloc qu'on lit avant de quitter la page : la place d'une invitation, pas
   d'un plan du site. */
/* ⚠️  CENTRÉE, ET PAS ÉTALÉE SUR TOUTE LA LARGEUR.

   Elle était en `space-between` : le texte collé à gauche, les boutons
   rejetés à droite, séparés par un vide qui grandissait avec l'écran. Sur
   un moniteur large, les deux moitiés n'avaient plus l'air d'appartenir au
   même bloc.

   Centrée et bridée à 720 px, elle se lit comme une invitation posée entre
   les colonnes et le copyright — ce qu'elle est. */
.wr-footer__communaute {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 720px;
  margin: 36px auto 8px;
  padding: 22px 24px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 14px;

  /* ⚠️  MÊME ERREUR QUE LA LANGUE COURANTE : DES COULEURS DE FOND SOMBRE.

     Un fond blanc à 4 % et une bordure blanche à 10 % sont invisibles sur
     un pied de page clair — la card n'aurait ni fond ni contour, et son
     titre en blanc serait illisible. Elle ne se voit pas aujourd'hui parce
     qu'aucun bloc « communauté » n'est configuré ; elle serait apparue
     cassée le jour où l'on en aurait créé un.

     On reprend donc les couleurs du reste du pied. */
  background: var(--wr-violet-softer, #F8F4FD);
}

.wr-footer__communaute-txt { min-width: 0; }

/* La description garde sa mesure de lecture, mais centrée : sans
   `margin-inline: auto`, un `max-width` la laisserait collée à gauche
   à l'intérieur d'un bloc pourtant centré — l'erreur classique. */
.wr-footer__communaute-desc { margin-inline: auto; }

.wr-footer__communaute-titre {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
}
.wr-footer__communaute-desc {
  margin: 4px 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--wr-muted, #6B7280);
  max-width: 46ch;
}

.wr-footer__communaute-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  /* Centrés avec la card : sans ça, ils s'alignent à gauche du bloc et le
     centrage du reste paraît raté. Deux blocs séparés pour la même classe
     auraient fini par diverger — c'est déjà arrivé sur `.wr-prose`. */
  justify-content: center;
}

/* Vert WhatsApp en fond : ces liens sortent du site vers une application
   identifiable, et l'utilisateur doit savoir où il va AVANT de cliquer. */
.wr-footer__communaute-lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #25D366;
  color: #06331A;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.wr-footer__communaute-lien:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wr-footer__communaute-lien svg { flex: none; }

@media (max-width: 640px) {
  /* ⚠️  `align-items: flex-start` ANNULAIT LE CENTRAGE SUR TÉLÉPHONE.

     Cette règle datait de la version étalée : elle repassait le contenu à
     gauche. La card est désormais centrée à toutes les tailles — on ne
     garde que ce qui reste utile en petite largeur, les boutons pleine
     largeur. */
  .wr-footer__communaute { padding: 18px; }
  .wr-footer__communaute-lien { width: 100%; justify-content: center; }
}

/* ⚠️  LA LANGUE COURANTE RESTE UN LIEN, MAIS SE DISTINGUE.

   La retirer de la liste ferait sauter une ligne d'une langue à l'autre et
   décalerait la colonne. La rendre inerte priverait d'un repère : savoir où
   l'on est fait partie de ce qu'on vient chercher dans un sélecteur.

   ⚠️  ELLE ÉTAIT EN BLANC — DONC INVISIBLE.

       `color: #fff` a été écrit pour un pied de page sombre. Le pied est
       clair : la langue courante disparaissait purement et simplement de la
       liste. Le lien existait, il était cliquable, mais on ne le voyait
       pas — et la langue affichée semblait absente des choix possibles.

       Une pastille violette la marque désormais : elle se distingue par sa
       couleur ET par son fond, et non par une nuance de gris qui se
       confondrait avec un lien survolé. */
.wr-footer__link.est-actuelle {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet-dark, #6B47A6);
  font-weight: 700;
}

/* Au survol, la pastille ne doit pas reprendre la couleur des autres liens :
   elle resterait lisible, mais on croirait avoir changé de sélection. */
.wr-footer__link.est-actuelle:hover {
  background: #EDE3FB;
  color: var(--wr-violet-dark, #6B47A6);
}

/* ── CV anonyme : adresse publique + interrupteur de publication ─────────
   Le slug vit sur la card de publication du récapitulatif : cliquable
   quand la page /cv/{ref} répond, simple identifiant sinon. L'interrupteur
   soumet le formulaire au changement — la sémantique HTML native (case
   absente = hors ligne) fait foi côté route. */
.wr-anon__slug { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: #6B7280; flex-wrap: wrap; }
.wr-anon__slug code { font-size: 13px; background: #F6F1E7; border: 1px solid #E9E0CF; border-radius: 8px; padding: 3px 8px; color: #2A2438; }
.wr-anon__slug a { text-decoration: none; }
.wr-anon__slug a code { background: #F6F1FD; border-color: #E4D7F7; color: #6B47A6; }
.wr-anon__slug a:hover code { background: #EDE3FB; }
.wr-anon__slug em { font-style: normal; font-size: 11.5px; color: #9AA0A6; }

.wr-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.wr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wr-switch__track { width: 44px; height: 24px; flex: none; border-radius: 999px; background: #D8D2C4; position: relative; transition: background .15s ease; }
.wr-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s ease; }
.wr-switch input:checked + .wr-switch__track { background: #6B47A6; }
.wr-switch input:checked + .wr-switch__track::after { left: 23px; }
.wr-switch input:focus-visible + .wr-switch__track { outline: 2px solid #6B47A6; outline-offset: 2px; }
.wr-switch__label { font-size: 13.5px; font-weight: 600; color: #2A2438; }

/* ── Récapitulatif du CV anonyme : deux colonnes ─────────────────────────
   À gauche le DOCUMENT (rendu public à l'identique, classes wr-cvp__ de
   wr-pages.css, dans une card blanche) ; à droite les ACTIONS empilées.
   La colonne d'actions est collante : on relit un CV long, l'interrupteur
   de publication reste sous la main. */
.wr-anon__cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 1080px) { .wr-anon__cols { grid-template-columns: 1fr; } }

/* ⚠️  PLUS UNE CARD, MAIS UNE PILE DE CARDS.

   C'était un seul bloc blanc de 28 px de padding contenant tout le CV.
   Depuis que l'en-tête et chaque section sont des cards (voir
   `.wr-cvp__head` et `.wr-cvb__sec`), ce conteneur ne doit plus rien
   dessiner : il ne fait que porter la colonne. Lui laisser un fond et une
   bordure donnerait une card autour des cards. */
.wr-anon__doccard { background: none; border: 0; padding: 0; }

.wr-anon__aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
@media (max-width: 1080px) { .wr-anon__aside { position: static; } }

/* Dans l'aside (360 px), la card de publication s'empile : le texte, le
   slug, puis l'interrupteur — la version en ligne (côte à côte) était
   pensée pour la pleine largeur. */
.wr-anon__aside .wr-anon__publish { flex-direction: column; align-items: stretch; }
.wr-anon__aside .wr-anon__publish form { display: flex; }

/* Les champs du formulaire d'envoi passent sur une colonne. */
.wr-anon__aside .wr-anon__grid { grid-template-columns: 1fr; }

/* L'historique devient SA card : on neutralise la séparation interne qui
   n'avait de sens que niché dans la card d'envoi. */
.wr-anon__histcard .wr-anon__hist { margin-top: 0; padding-top: 0; border-top: 0; }

/* Hors ligne : la petite card qui explique ce que la publication ouvre. */
.wr-anon__offcard {
  display: flex; gap: 12px; align-items: flex-start;
  background: #F6F1E7; border: 1.5px solid #E9E0CF; border-radius: 16px; padding: 16px 18px;
}
.wr-anon__offcard svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #8A63C1; }
.wr-anon__offcard p { margin: 0; font-size: 13px; line-height: 1.55; color: #3F3A52; }

/* L'adresse publique du CV anonyme, dans la card de publication : le
   composant `wr-share-url` du dashboard recruteur, resserré pour la
   colonne de 360 px (le bouton passe sous le champ, l'URL reste lisible). */
.wr-anon__urlbox { margin: 14px 0 0; padding: 14px; }

/* L'en-tête n'a plus d'icône (le carré violet se lisait comme un second
   bouton, à côté du vrai). Sans elle, l'alignement en flex et son gap ne
   servent plus à rien : l'étiquette occupe la ligne. */
.wr-anon__urlbox .wr-share-url__head { display: block; margin-bottom: 8px; }
.wr-anon__urlbox .wr-share-url__head strong { font-size: 13px; color: #2A2438; }
.wr-anon__urlbox .wr-share-url__row { flex-direction: column; }
.wr-anon__urlbox .wr-share-url__input { font-size: 12.5px; width: 100%; }

.wr-anon__urlopen { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #6B47A6; text-decoration: none; }
.wr-anon__urlopen:hover { text-decoration: underline; }
.wr-anon__urlopen svg { width: 13px; height: 13px; flex: none; }

.wr-anon__urlwarn { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #9AA0A6; }

/* ── /cv/{ref} sans CV publié : la page qui NOMME le cas ─────────────────
   Ni le 404 générique, ni une redirection : celui qui a reçu le lien doit
   savoir si l'adresse est fausse ou si le CV a simplement été retiré. */
.wr-cvna { max-width: 520px; margin: 40px auto 64px; text-align: center; }
.wr-cvna__ico { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #F6F1FD; border: 1.5px solid #E4D7F7; color: #6B47A6; margin-bottom: 18px; }
.wr-cvna__ico svg { width: 26px; height: 26px; }
.wr-cvna__title { margin: 0 0 10px; font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: #2A2438; }
.wr-cvna__text { margin: 0 0 24px; font-size: 14.5px; line-height: 1.6; color: #6B7280; }
.wr-cvna__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── « Présenter mon CV à une entreprise » (Mes candidatures) ────────────
   Le choix du CV est la décision structurante de cet envoi : les deux
   options sont des blocs cliquables, pas deux boutons radio perdus dans une
   ligne. Une option indisponible reste VISIBLE et grisée, avec sa raison —
   la masquer laisserait croire que la fonctionnalité n'existe pas. */
.wr-present { background: #fff; border: 1.5px solid #EEE7DA; border-radius: 18px; padding: 22px; margin-bottom: 24px; }
.wr-present__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.wr-present__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #6B47A6; color: #fff; }
.wr-present__ico svg { width: 18px; height: 18px; }
.wr-present__head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #2A2438; }
.wr-present__head p { margin: 0; font-size: 13px; line-height: 1.55; color: #6B7280; }

.wr-present__choice { border: 0; padding: 0; margin: 0 0 16px; }
.wr-present__choice legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: #2A2438; }
.wr-present__opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid #EEE7DA; border-radius: 12px; cursor: pointer; margin-bottom: 8px; }
.wr-present__opt:hover { background: #FDFBF7; }
.wr-present__opt:has(input:checked) { border-color: #6B47A6; background: #F6F1FD; }
.wr-present__opt.is-off { opacity: .55; cursor: not-allowed; }
.wr-present__opt input { margin-top: 2px; accent-color: #6B47A6; }
.wr-present__optbody { display: block; }
.wr-present__optbody strong { display: block; font-size: 13.5px; color: #2A2438; }
.wr-present__optbody em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 1.5; color: #6B7280; }

.wr-present__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 14px; }
.wr-present__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.wr-present__hint { margin: 0; font-size: 11.5px; line-height: 1.5; color: #9AA0A6; max-width: 460px; }
.wr-present__quota { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #6B47A6; }

.wr-present__none { background: #F6F1E7; border: 1.5px solid #E9E0CF; border-radius: 14px; padding: 16px 18px; }
.wr-present__none p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #3F3A52; }
.wr-present__nonelinks { display: flex; gap: 8px; flex-wrap: wrap; }

.wr-present__hist { margin-top: 20px; padding-top: 16px; border-top: 1px solid #EEE7DA; }
.wr-present__hist h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #2A2438; }
.wr-present__hist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wr-present__hist li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: #6B7280; }
.wr-present__hist code { font-size: 12.5px; background: #F6F1E7; border: 1px solid #E9E0CF; border-radius: 6px; padding: 2px 7px; color: #2A2438; }
.wr-present__histco { font-weight: 600; color: #3F3A52; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLEAUX ET LISTES DANS UN ARTICLE — traités comme des cards

   ⚠️  LE HTML VIENT D'UN IMPORT, PAS D'UN ÉDITEUR PROPRE.

       Sur 870 articles réels : 328 ont un `<thead>`, 528 ont des `<th>`
       posés directement dans la première `<tr>`, sans `<thead>`. Styler
       `thead th` aurait donc laissé l'en-tête de 528 tableaux en texte nu —
       et le défaut ne se serait vu qu'en ouvrant l'un d'eux, au hasard.
       On cible donc les DEUX formes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tableaux ── */
.wr-prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: separate;   /* `collapse` ignore border-radius */
  border-spacing: 0;
  background: var(--wr-violet-soft, #F2EDFA);
  border: 1px solid #E4D7F7;
  border-radius: 16px;
  overflow: hidden;            /* les angles coupent le fond des cellules */
  font-size: 14px;
  line-height: 1.6;
}

/* L'en-tête, dans les deux écritures : `<thead> th` ET `<tr> th` sans thead. */
.wr-prose table thead th,
.wr-prose table tr th {
  background: var(--wr-violet, #8A63C1);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 13px 16px;
  border: 0;
  vertical-align: middle;
}

/* Le violet foncé reste au survol des CTA ; ici il sert de séparateur
   discret entre colonnes d'en-tête. */
.wr-prose table th + th { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }

.wr-prose table td {
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid #E4D7F7;
  vertical-align: top;
  color: var(--wr-ink-2, #4B5162);
}

/* La première ligne de données n'a pas besoin d'un trait juste sous
   l'en-tête coloré : le contraste suffit déjà à la séparer. */
.wr-prose table tr:first-child td { border-top: 0; }

/* Une ligne sur deux, à peine plus claire : sur un tableau de dix lignes,
   l'œil perd la ligne en la parcourant de gauche à droite. */
.wr-prose table tbody tr:nth-child(even) td,
.wr-prose table tr:nth-child(even) td { background: rgba(255, 255, 255, .45); }

.wr-prose table caption {
  caption-side: bottom;
  padding-top: 10px;
  font-size: 12.5px;
  color: var(--wr-muted, #6B7280);
  text-align: left;
}

/* ⚠️  UN TABLEAU DE QUATRE COLONNES NE TIENT PAS SUR UN TÉLÉPHONE.

   Sans ça, il déborde et pousse toute la page en largeur — c'est la page
   entière qui se met à défiler latéralement, pas le tableau. `display:
   block` le rend défilable pour lui seul. La contrepartie (il ne s'étire
   plus sur toute la largeur) n'existe pas ici : il déborde de toute façon. */
@media (max-width: 720px) {
  .wr-prose table { display: block; overflow-x: auto; }
}

/* ── Listes à puces ── */

/* ⚠️  `> ul` : LES LISTES DE PREMIER NIVEAU, PAS LES IMBRIQUÉES.

   Une sous-liste dans une puce deviendrait une card DANS une card, avec
   deux fonds violets superposés et deux bordures. Elle reste plate à
   l'intérieur. */
.wr-prose > ul {
  margin: 1.5em 0;
  padding: 18px 22px 18px 40px;
  background: var(--wr-violet-soft, #F2EDFA);
  border: 1px solid #E4D7F7;
  border-radius: 16px;
  list-style: disc;
}

.wr-prose > ul > li { margin-top: .5em; }
.wr-prose > ul > li:first-child { margin-top: 0; }

/* La puce prend le violet de la marque : en noir sur fond lavande, elle
   fait tache sans rien signifier. */
.wr-prose > ul > li::marker { color: var(--wr-violet, #8A63C1); }

/* Les listes imbriquées : aucun fond, aucune bordure, aucun padding de
   card — juste le retrait qui montre la hiérarchie. */
.wr-prose > ul ul,
.wr-prose > ul ol {
  margin: .5em 0;
  padding: 0 0 0 1.4em;
  background: none;
  border: 0;
  border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   %CHECKLIST_reference% — la card d'une checklist dans un article

   Un aperçu, pas une copie : cinq points, le reste compté, un lien vers la
   page complète. Voir `renderChecklist` dans shortcodes.service.js.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-sc-cl {
  /* `not-prose` en esprit : la card est un bloc à part, elle ne doit pas
     hériter des marges de paragraphe du contenu qui l'entoure. */
  display: block;
  margin: 2em 0;
  padding: 22px 24px;
  background: var(--wr-violet-soft, #F2EDFA);
  border: 1px solid #E4D7F7;
  border-radius: 18px;
}

.wr-sc-cl__head { display: flex; align-items: flex-start; gap: 14px; }

.wr-sc-cl__ico {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--wr-violet, #8A63C1);
  color: #fff;
}
.wr-sc-cl__ico svg { width: 20px; height: 20px; }

.wr-sc-cl__kicker {
  display: block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wr-violet, #8A63C1);
}
.wr-sc-cl__title {
  margin: 3px 0 0;
  font-size: 18px; font-weight: 800; line-height: 1.3;
  color: var(--wr-ink, #1E1B2E);
}

.wr-sc-cl__intro {
  margin: 14px 0 0;
  font-size: 14px; line-height: 1.6;
  color: var(--wr-ink-2, #4B5162);
}

/* La liste d'aperçu : des coches, pas des puces — c'est une checklist.
   `list-style: none` + pseudo-élément, pour que la coche prenne la couleur
   de la marque sans dépendre d'une police d'icônes. */
.wr-sc-cl__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  border: 0;
}
.wr-sc-cl__item {
  position: relative;
  margin: 0 0 8px;
  padding-left: 26px;
  font-size: 14px; line-height: 1.55;
  color: var(--wr-ink-2, #4B5162);
}
.wr-sc-cl__item::before {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: 15px; height: 9px;
  border-left: 2.4px solid var(--wr-violet, #8A63C1);
  border-bottom: 2.4px solid var(--wr-violet, #8A63C1);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* Un point marqué « essentiel » au backoffice ressort ici aussi : sinon la
   distinction n'existe que sur la page complète, et l'aperçu aplatit
   justement ce que l'auteur a jugé important. */
.wr-sc-cl__item.is-key { font-weight: 700; color: var(--wr-ink, #1E1B2E); }

.wr-sc-cl__more {
  margin: 10px 0 0;
  font-size: 13px; font-weight: 600;
  color: var(--wr-violet-dark, #6B47A6);
}

.wr-sc-cl__cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px;
  padding: 11px 18px;
  border-radius: 100px;
  background: var(--wr-violet, #8A63C1);
  color: #fff;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
}
.wr-sc-cl__cta:hover { background: var(--wr-violet-dark, #6B47A6); }
.wr-sc-cl__cta svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .wr-sc-cl { padding: 18px; }
  .wr-sc-cl__title { font-size: 16px; }
}

/* ── Lieu préféré, dans le header ─────────────────────────────────────────
   Discret : c'est un repère, pas une action principale. Le point
   d'interrogation signale une supposition — voir wr-lieu.ejs. */
.wr-lieu {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-pill, 100px);
  color: var(--wr-ink-2, #374151);
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  transition: border-color var(--wr-t, .15s), color var(--wr-t, .15s);
}
.wr-lieu:hover { border-color: var(--wr-violet-2, #A98AD3); color: var(--wr-violet-dark, #6B47A6); }
.wr-lieu svg { width: 14px; height: 14px; flex: none; }
.wr-lieu__txt { text-transform: capitalize; }

/* Une supposition s'affiche en retrait de ce qui est choisi. */
.wr-lieu--devine { color: var(--wr-muted, #6B7280); border-style: dashed; }
.wr-lieu__q { font-weight: 700; opacity: .7; }

@media (max-width: 900px) {
  /* Sur mobile le header est plein : on garde l'icône, on retire le texte. */
  .wr-lieu__txt, .wr-lieu__q { display: none; }
  .wr-lieu { padding: 6px 8px; }
}

/* ── Articles mis en avant sur une landing de ville ────────────────────── */
.wr-geo-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--wr-s-4, 16px);
  margin-top: var(--wr-s-5, 20px);
}
.wr-geo-article { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.wr-geo-article__img { width: 100%; height: 130px; object-fit: cover; }
.wr-geo-article__body { padding: 14px 16px 16px; }
.wr-geo-article__t { font-size: 15px; margin: 0 0 6px; color: var(--wr-ink, #1E1B2E); }
.wr-geo-article__x { font-size: 13px; color: var(--wr-muted, #6B7280); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   L'ATTRIBUT `hidden` DOIT RESTER FIABLE

   ⚠️  `hidden` N'EST PAS UNE PROPRIÉTÉ : C'EST UNE RÈGLE PAR DÉFAUT.

       Le navigateur applique `[hidden] { display: none }` depuis sa propre
       feuille — la plus faible de toutes. N'importe quelle règle d'auteur
       posant un `display` la bat, même sans `!important`.

       Un audit du projet a trouvé VINGT-ET-UNE classes dans ce cas :
       `.wr-btn`, `.wr-confirm`, `.wr-cmodal`, `.bo-bulk`… Toutes rendues
       quelque part avec `hidden`, toutes visibles au chargement jusqu'à ce
       que le JavaScript passe et les masque.

       Le symptôme est un élément qui apparaît puis disparaît tout seul —
       « Réduire » sous les pays, une modale qui clignote, une barre
       d'actions qui s'affiche avant qu'on ait rien coché.

   ⚠️  POURQUOI `!important` EST JUSTIFIÉ ICI.

       Il ne s'agit pas d'imposer un style, mais de RESTAURER le
       comportement du navigateur face à des règles d'auteur qui l'ont
       accidentellement neutralisé. Sans lui, chaque nouvelle classe posant
       un `display` rouvrirait le défaut.

       Un élément qui doit rester visible malgré tout ne porte simplement
       pas l'attribut.
   ══════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ── Modale de choix du lieu ──────────────────────────────────────────────

   ⚠️  ELLE S'APPELAIT `.wr-lieu-modal` — UN NOM DÉJÀ PRIS.

       `wr-pages.css` définit un composant `.wr-lieu-modal` sans rapport, chargé
       APRÈS celui-ci, avec `opacity: 0` et `visibility: hidden` (il ne
       s'affiche qu'avec `.is-open`).

       Ma boîte héritait donc de ces deux propriétés : `showModal()`
       l'ouvrait, le fond sombre bloquait la page, et la boîte restait
       invisible. Aucune erreur, aucun message — le pire des symptômes.

       Deux composants ne peuvent pas porter le même nom. Le préfixe par
       écran existe précisément pour ça.
   ────────────────────────────────────────────────────────────────────── */

.wr-lieu-modal {
  border: 0; padding: 0;
  border-radius: var(--wr-r-2xl, 20px);
  background: var(--wr-card, #fff);
  box-shadow: 0 24px 64px rgba(30, 27, 46, .18);
  max-width: 560px; width: calc(100% - 32px);
}
.wr-lieu-modal::backdrop { background: rgba(30, 27, 46, .45); }

/* ⚠️  UNE `<dialog>` FERMÉE DOIT RESTER INVISIBLE.

   Le navigateur pose `dialog:not([open]) { display: none }`. Comme pour
   l'attribut `hidden` des boutons du hero, n'importe quelle règle d'auteur
   posant un `display` la bat — et la boîte s'afficherait alors en pleine
   page, tout le temps.

   On l'écrit explicitement plutôt que d'espérer que personne n'ajoute un
   `display` sur `.wr-lieu-modal` un jour. */
.wr-lieu-modal:not([open]) { display: none; }

/* La boîte se centre elle-même dans la couche supérieure. `margin: auto`
   avec `inset: 0` est ce que fait le navigateur ; on le réaffirme parce
   qu'un `margin` hérité d'une règle générique le casserait. */
.wr-lieu-modal[open] { margin: auto; }

.wr-lieu-modal__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--wr-line, #EEF1F7);
}
.wr-lieu-modal__title { margin: 0 0 4px; font-size: 18px; }
.wr-lieu-modal__sub { margin: 0; font-size: 13px; color: var(--wr-muted, #6B7280); }
.wr-lieu-modal__x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--wr-muted, #6B7280); padding: 0 4px;
}
.wr-lieu-modal__body { padding: 18px 24px; max-height: 60vh; overflow-y: auto; }
.wr-lieu-modal__foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 24px 20px; border-top: 1px solid var(--wr-line, #EEF1F7);
}

/* La grille de pays : deux colonnes suffisent à rester lisible sur mobile
   comme sur grand écran, sans média-requête. */
.wr-lieu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }

.wr-lieu-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; text-align: left;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-md, 12px);
  background: var(--wr-card, #fff);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--wr-ink-2, #374151);
}
.wr-lieu-opt:hover { border-color: var(--wr-violet-2, #A98AD3); }
.wr-lieu-opt.is-active { border-color: var(--wr-violet, #8A63C1); background: var(--wr-violet-softer, #F8F4FD); }
.wr-lieu-opt__n { flex: 1; }
.wr-lieu-opt__c { font-size: 11px; color: var(--wr-muted, #6B7280); font-weight: 500; }

/* ── Modale de lieu : suggérés, recherche, liste défilante ────────────────
   Toutes les classes sont préfixées `wr-lieu-` : `wr-modal` est déjà pris
   par un composant de wr-pages.css, et la collision rendait la boîte
   invisible tout en bloquant la page. */
.wr-lieu-modal__label {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wr-muted, #6B7280);
}
.wr-lieu-modal__n {
  padding: 1px 7px; border-radius: 100px;
  background: rgba(0, 0, 0, .06);
  font-size: 10.5px; letter-spacing: 0;
}
.wr-lieu-modal__vide {
  margin: 12px 0 0; font-size: 13px;
  color: var(--wr-muted, #6B7280); text-align: center;
}

.wr-lieu-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 9px 12px;
  border: 1px solid var(--wr-line-2, #E5E9F0);
  border-radius: var(--wr-r-md, 12px);
  background: #FAFBFD;
}
.wr-lieu-search svg { width: 15px; height: 15px; flex: none; color: var(--wr-muted, #6B7280); }
.wr-lieu-search input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: 13.5px; color: var(--wr-ink, #1E1B2E);
}

/* ⚠️  LE DÉFILEMENT EST ICI, PAS SUR LA MODALE.

   Sur quatre-vingts pays, faire défiler toute la boîte emporterait le titre
   et les boutons du bas hors de l'écran — on chercherait « Annuler » en
   remontant. `overscroll-behavior` empêche la page du dessous de défiler
   quand on arrive au bout de la liste. */
.wr-lieu-grid--scroll {
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

/* Un pays masqué par la recherche : `hidden` seul serait battu par le
   `display` de la grille — même piège que les boutons du hero. */
.wr-lieu-opt[hidden] { display: none !important; }

/* ── Langue sans version de la page courante ──────────────────────────────
   Grisée et non cliquable. Le curseur par défaut plutôt que `not-allowed` :
   ce n'est pas une interdiction, c'est une absence. */
.wr-lang__item.is-indispo {
  color: var(--wr-ink-3, #9CA3AF);
  cursor: default;
  opacity: .6;
}
.wr-lang__item.is-indispo:hover { background: none; }