/* ══════════════════════════════════════════════════════════════════════
   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 */
}

/* ══════════════════════════════════════════════════════════════════
   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.
   ══════════════════════════════════════════════════════════════════ */

.wr-prose {
  font-size: 15px;
  line-height: 1.75;
  color: var(--wr-ink-2);
  max-width: 720px;
}

.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; }

.wr-footer__link {
  font-size: 13.5px;
  color: var(--wr-muted);
  transition: color var(--wr-t);
}
.wr-footer__link:hover { 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 { font-size: 15px; line-height: 1; }

.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%; }