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

/* Inter : la police du header seulement (wr-app.css, « LE HEADER EN VIOLET
   PASTEL ») — nette et lisible à 15-16 px, là où Montserrat, très large,
   rendait la barre chargée. Le reste du site garde Montserrat. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

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

:root {
  /* Hauteur de l'en-tête. Employée par `wr-shell.css`. */
  --wr-header-h: 68px;

  /* ── 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);
}

/* ══════════════════════════════════════════════════════════════════
   L'ÉTAT D'ERREUR D'UN CHAMP

   ⚠️  DEUX POINTS D'ACCROCHE, VOLONTAIREMENT.

   `is-error` sur le CONTRÔLE : c'est ce que posent les gabarits depuis le
   début, et ce que le script de contrôle avant envoi continue de poser.

   `is-error` sur le `.wr-field` qui l'entoure : c'est ce qui permet de
   rougir le LIBELLÉ et les options d'un groupe radio — on ne peut pas les
   atteindre depuis l'input avec du CSS. Un champ vide signalé par un seul
   filet d'un pixel, sur un formulaire long, ne se voit pas ; un libellé
   rouge, oui.

   `.wr-select` manquait : un pays ou une catégorie obligatoire n'aurait
   jamais pu s'afficher en erreur. */
.wr-input.is-error,
.wr-select.is-error,
.wr-textarea.is-error,
.wr-field.is-error .wr-input,
.wr-field.is-error .wr-select,
.wr-field.is-error .wr-textarea { border-color: var(--wr-danger); }

.wr-field.is-error .wr-label { color: var(--wr-danger); }

/* Au focus, le halo suit la couleur du bord : `--wr-danger` à 12 %, comme
   le halo violet ci-dessus. Un champ rouge qui s'allume en violet dirait
   deux choses à la fois. */
.wr-input.is-error:focus,
.wr-select.is-error:focus,
.wr-textarea.is-error:focus,
.wr-field.is-error .wr-input:focus,
.wr-field.is-error .wr-select:focus,
.wr-field.is-error .wr-textarea:focus {
  border-color: var(--wr-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

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

/* 09/11/2026 — LES LIGNES VIDES DE L'ÉDITEUR RESTENT VISIBLES.
   L'éditeur écrit une ligne vide en <p><br></p> (ou <div><br></div>) : un
   paragraphe sans texte, que certains navigateurs écrasent à zéro. On lui
   garde la hauteur d'une ligne, et les retours <br> restent des retours. */
.wr-prose p:empty,
.wr-prose div:empty { min-height: 1.75em; }
.wr-prose p:has(> br:only-child),
.wr-prose div:has(> br:only-child) { min-height: 1.75em; }
.wr-prose br { display: initial; }

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

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

/* ══════════════════════════════════════════════════════════════════════════
   LES LISTES DE PROSE — puces maison

   ⚠️  `::marker` PLUTÔT QU'UN `::before` ET `list-style: none`.

       La méthode habituelle — supprimer la puce, en redessiner une en
       `::before` positionnée en absolu — casse deux choses : le retour à la
       ligne d'un élément long ne s'aligne plus sous son texte, et les
       lecteurs d'écran n'annoncent plus « liste de 4 éléments », puisque le
       navigateur ne voit plus de liste.

       `::marker` colore la vraie puce. Le navigateur garde sa mise en page
       et sa sémantique ; on ne change que l'apparence.

   ⚠️  LES LISTES IMBRIQUÉES CHANGENT DE PUCE.

       Sans ça, deux niveaux de liste sont indiscernables : on lit une suite
       plate alors que la structure dit autre chose.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-prose ul, .wr-prose ol { padding-left: 1.45em; margin: 1em 0; }
.wr-prose ul { list-style: disc; }
.wr-prose ol { list-style: decimal; }

.wr-prose ul ul { list-style: circle; }
.wr-prose ul ul ul { list-style: square; }

.wr-prose li { margin-top: .4em; }

/* La puce prend la couleur de la marque ; le texte garde la sienne. */
.wr-prose li::marker {
  color: var(--wr-violet, #8A63C1);
  font-weight: 700;
}

/* Une liste imbriquée respire moins : elle appartient à son parent. */
.wr-prose li > ul, .wr-prose li > ol { margin: .35em 0 .1em; }

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

/* ── Mode application (`?mobile`) : le logo seul, centré ──────────────
   Même hauteur de sentiment que le header complet, sans rien d'autre. Le
   logo n'est pas un lien : `.wr-logo-link` est un <span> ici. */
.wr-header-mobile {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px;
  background: var(--wr-card);
  border-bottom: 1px solid var(--wr-line);
}
.wr-header-mobile .wr-logo-link { cursor: default; }

.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;
  /* ⚠️  LA HAUTEUR EST AUSSI UNE VARIABLE.

         `wr-shell.css` en a besoin pour calculer la hauteur minimale d'une
         page pleine largeur. Écrite deux fois — ici et là-bas — les deux
         valeurs divergeraient à la première retouche, et le pied de page se
         décalerait de quelques pixels sans qu'on sache pourquoi. */
  height: var(--wr-header-h);

  /* ⚠️  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;
}

/* ══════════════════════════════════════════════════════════════════════
   LE SCORE DANS LE HEADER

   Une pastille discrète à gauche de l'avatar : une étoile, un nombre, et
   un lien vers le classement. Elle ne doit pas concurrencer l'avatar —
   c'est un indicateur, pas une action principale.
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️  UN BOUTON VERROUILLÉ N'EST PAS UN BOUTON DÉSACTIVÉ.

       `disabled` le rendrait gris et inerte : on ne saurait pas pourquoi,
       et il n'y aurait rien à faire. Celui-ci reste cliquable et mène à la
       page d'abonnement — c'est une porte, pas un mur. Le cadenas et la
       teinte plus sourde disent qu'il y a une condition. */
.wr-btn.est-verrouille { opacity: .72; }
.wr-btn.est-verrouille:hover { opacity: 1; }

/* Une rangée d'offre sans page publique : même allure, mais on ne la
   présente pas comme cliquable. */
.wr-row--inerte { cursor: default; }
.wr-row--inerte:hover { background: inherit; border-color: var(--wr-line, #EEF1F7); transform: none; }

.wr-points {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 100px;
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet-d, #6B47A6);
  font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap; flex: none;
  transition: background .12s ease, color .12s ease;
}
.wr-points:hover { background: #E7DDF7; color: var(--wr-violet-d, #6B47A6); }
.wr-points svg { width: 15px; height: 15px; flex: none; }
.wr-points__n { font-variant-numeric: tabular-nums; }

/* ⚠️  LE MOT N'EST PAS UN CHIFFRE.

       « Classement » est plus long qu'un score et n'a pas besoin de la
       chasse fixe, qui écarte les lettres inutilement. La pastille reste
       identique par ailleurs : même fond, même étoile, même lien — c'est
       le contenu qui change, pas le composant. */
.wr-points--mot .wr-points__n { font-variant-numeric: normal; letter-spacing: .01em; }

/* Le header est déjà serré sur mobile entre le logo, le lieu et l'avatar :
   la pastille y ferait passer le nom à la ligne. Le score reste lisible
   depuis le menu. */
@media (max-width: 900px) { .wr-points { display: none; } }

.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) {
  /* La variable suit : le calcul de `wr-shell.css` reste juste sur mobile. */
  :root { --wr-header-h: 60px; }
  .wr-header__inner { padding-inline: 20px; }
  .wr-nav { display: none; }
  .wr-burger { display: grid; }
  .wr-header__actions { margin-left: auto; }
}

/* ⚠️  LE BOUTON DE CONNEXION PASSE EN ICÔNE DÈS 760 px.

       144 px pour « → Se connecter », sur une barre de 760 dont la moitié
       est déjà prise : c'est le poste le plus coûteux après la navigation.
       L'icône seule en fait 40, et la porte reste au même endroit.

       Le mot n'est pas supprimé mais masqué à l'œil : `.wr-sr` le garde
       pour les lecteurs d'écran, et le `title` l'affiche au survol. Un
       bouton sans nom accessible est un bouton que personne d'autre que
       vous ne sait ouvrir. */
@media (max-width: 760px) {
  .wr-btn--auth .wr-btn__mot {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .wr-btn--auth { padding: 9px 11px; }
}

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

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

/* L'application mobile, au-dessus des boutons de compte. Séparée par un
   filet : c'est une proposition, pas une action du parcours. */
.wr-drawer__apps {
  padding: 14px 20px 4px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}
.wr-drawer__label {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wr-muted-2, #9CA3AF);
}
/* Deux boutons côte à côte dans 320 px de tiroir : ils partagent la
   largeur au lieu de passer à la ligne. */
.wr-drawer__apps .wr-store-pill { flex: 1; justify-content: center; }

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

/* ══════════════════════════════════════════════════════════════════════
   LES BOUTONS DE TÉLÉCHARGEMENT  (partials/wr-stores.ejs)

   Deux habillages du même partial : les pastilles nommées (pied de page,
   sous le hero) et les icônes rondes (header, où la largeur est disputée).
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️  `wr-appstores`, ET SURTOUT PAS `wr-stores`.

       `.wr-stores` existe déjà dans `wr-pages.css` — deux fois, à
       l'identique, et plus aucun gabarit ne l'emploie. C'est du mort. Mais
       `wr-pages.css` est chargée APRÈS celle-ci : son `display: flex`
       écrasait la media query qui masque les icônes sous 1100 px, et elles
       restaient visibles. Le symptôme était parfait — la règle existe, la
       media query matche, et rien ne se passe.

       On ne touche pas à ces deux règles mortes : les supprimer est un
       autre chantier. On prend un nom qui n'appartient à personne. */
.wr-appstores { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ⚠️  PAS DE VARIANTE « ICÔNES RONDES » ICI.

       J'en avais écrit une — `wr-store-dot`, des ronds noirs — avant de
       voir que l'en-tête portait DÉJÀ deux icônes stylées
       (`wr-header__app`, dans wr-pages.css). Le résultat était quatre
       icônes pour deux applications. Le partial réemploie les classes
       d'origine ; il n'y avait rien à styler de plus. */

/* ── Les pastilles nommées ──
   La classe du conteneur existe pour que le gabarit ne pose pas un nom sans
   règle : une classe orpheline ne se distingue pas d'un oubli. */
.wr-appstores--pastilles { gap: 10px; }
.wr-hero__apps { justify-content: center; margin-top: 24px; }

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

/* Interrupteur compact, pour une option secondaire sous un champ (« Autre
   ville », « Autre secteur »). Ici et non dans wr-app.css : le tunnel ne
   charge que cette feuille. */
.wr-switch--sm .wr-switch__track { width: 36px; height: 20px; }
.wr-switch--sm .wr-switch__track::after { width: 14px; height: 14px; }
.wr-switch--sm input:checked + .wr-switch__track::after { left: 19px; }
.wr-switch--sm .wr-switch__label { font-size: 13.5px; }
.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; }


/* ══════════════════════════════════════════════════════════════════════════
   LE BOUTON « RECHERCHER » DE LA FICHE

   La barre de la fiche mène au moteur : sans bouton, il faut deviner qu'on
   valide avec Entrée. Il vit DANS la pilule, collé à droite, pour rester une
   seule commande à l'œil plutôt que deux éléments voisins.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-fiche-search .wr-search__inner { padding-right: 6px; }

.wr-search__go {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* Sur mobile, la pilule devient deux lignes : le champ, puis le bouton
     pleine largeur — un bouton de 40 px coincé à droite se rate au doigt. */
  .wr-fiche-search .wr-search__inner { flex-wrap: wrap; padding-right: 14px; }
  .wr-fiche-search .wr-search__input { flex: 1 1 100%; }
  .wr-search__go { width: 100%; margin-top: 8px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   LES STORES DANS L'EN-TÊTE — deux pastilles rondes, à gauche de la connexion

   Même hauteur que la pilule de connexion, pour que la ligne reste droite.
   Grises au repos, elles prennent le noir de la pilule au survol : elles
   appartiennent au même groupe d'actions sans lui voler la vedette.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-header__apps { display: inline-flex; gap: 6px; margin-right: 4px; }

.wr-header__app {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 100px;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  color: var(--wr-muted, #6B7280);
  transition: background .14s, color .14s, border-color .14s;
}
.wr-header__app:hover { background: var(--wr-ink, #1E1B2E); border-color: var(--wr-ink, #1E1B2E); color: #fff; }

/* Sous 480 px, l'en-tête est déjà serré : les stores restent au pied de page. */
/* ⚠️  MASQUÉES DÈS 991 px, PAS À 480.

       Elles disparaissaient à 480 px : entre les deux, la barre portait le
       classement, les deux stores, « Se connecter », la langue et le
       burger — et c'est le menu qui se faisait écraser. Mesuré à 760 px :
       336 px d'actions pour une barre qui en fait 760.

       On les retire donc en même temps que la navigation principale, au
       point de rupture du burger. Elles ne sont pas perdues : `wr-drawer`
       les reprend, et c'est même leur vraie place — c'est sur téléphone
       qu'on installe une application. */
@media (max-width: 991px) { .wr-header__apps { display: none; } }

/* Le lien « Cookies » du pied : un `<button>`, parce qu'il n'emmène nulle
   part — mais habillé comme les liens voisins, sinon il détonne dans une
   ligne de liens. */
.wr-footer__cookies {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   BANNIÈRE DE CONSENTEMENT  (partials/wr-consent.ejs + wr-consent.js)
   ══════════════════════════════════════════════════════════════════════════ */
.wr-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;

  /* ⚠️  AU-DESSUS DE LA BANNIÈRE « TÉLÉCHARGER L'APPLICATION ».

         Les deux vivent en bas d'écran. Le consentement bloque un
         traitement légal ; l'autre propose un téléchargement. En cas de
         recouvrement, c'est le premier qu'on doit pouvoir lire. */
  z-index: 1200;

  padding: 14px;
  display: flex;
  justify-content: center;
}

.wr-consent[hidden] { display: none; }

.wr-consent__box {
  width: 100%;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px;
  box-shadow: 0 18px 50px -14px rgba(30, 27, 46, .28);
  padding: 20px 22px;
}

/* Le bloc de texte. Pas de style propre — il existe pour grouper le titre et
   la description — mais une classe posée dans un gabarit sans règle dans la
   feuille ne se distingue pas d'un oubli. */
.wr-consent__texte { display: block; }

.wr-consent__titre {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 800; color: var(--wr-ink, #1E1B2E);
}

.wr-consent__desc {
  margin: 0;
  font-size: 13.5px; line-height: 1.6; color: var(--wr-ink-2, #374151);
}

.wr-consent__lien { color: var(--wr-violet, #8A63C1); text-decoration: underline; }

/* ── Le détail par catégorie ── */
.wr-consent__detail { margin-top: 12px; }

/* ⚠️  LE `<summary>` EST MASQUÉ, PAS SUPPRIMÉ.

       Un `<details>` sans `<summary>` n'est plus pilotable au clavier et
       certains navigateurs en inventent un. On le garde, invisible et hors
       du parcours de tabulation : c'est le bouton « Gérer » qui ouvre. */
.wr-consent__summary-cache {
  display: block; height: 0; overflow: hidden;
  list-style: none; pointer-events: none;
}
.wr-consent__summary-cache::-webkit-details-marker { display: none; }

/* Les deux actions du panneau, à poids égal : « Tout refuser » ne doit pas
   paraître secondaire par rapport à « Enregistrer ». */
.wr-consent__panneau-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wr-consent__panneau-actions .wr-btn { flex: 1 1 auto; justify-content: center; }

.wr-consent__cats { margin: 12px 0; display: grid; gap: 10px; }

.wr-consent__cat { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wr-consent__cat input { margin-top: 3px; flex: none; }

/* ⚠️  LA CASE DÉSACTIVÉE RESTE LISIBLE.

       `disabled` grise le texte dans certains navigateurs : on la remet au
       même contraste que les autres. Une ligne illisible donne
       l'impression d'un choix qu'on nous cache, alors qu'elle dit
       simplement qu'il n'y a pas de choix. */
.wr-consent__cat input:disabled + span { opacity: 1; }
.wr-consent__cat strong { display: block; font-size: 13.5px; color: var(--wr-ink, #1E1B2E); }
.wr-consent__cat em { display: block; font-size: 12.5px; font-style: normal; color: var(--wr-muted, #6B7280); }

/* ── Les boutons ──
   Poids visuel équivalent : refuser doit être aussi simple qu'accepter.
   C'est la règle que la CNIL sanctionne le plus souvent. */
.wr-consent__actions {
  margin-top: 16px;
  display: flex; gap: 10px; justify-content: flex-end;
}
.wr-consent__actions .wr-btn { flex: 0 0 auto; min-width: 140px; justify-content: center; }

/* ── Mobile ──
   Les deux boutons passent pleine largeur et s'empilent : à 390 px, deux
   boutons de 140 px côte à côte débordent, et l'un des deux se retrouve
   coupé — celui de droite, « Accepter », ce qui fausserait le choix. */
@media (max-width: 560px) {
  .wr-consent { padding: 10px; }
  .wr-consent__box { padding: 16px 16px 18px; border-radius: 16px; }
  /* ⚠️  `column`, PAS `column-reverse`.

         `column-reverse` inversait l'ordre du HTML : « Tout accepter » se
         retrouvait EN HAUT, donc lu en premier et le plus près du pouce.
         Les deux boutons ont beau faire la même taille, placer l'acceptation
         sous le doigt est un coup de pouce — exactement ce que la CNIL
         reproche.

         En colonne simple, le haut vers le bas reprend l'ordre gauche-droite
         du bureau : refuser, puis accepter. */
  .wr-consent__actions { flex-direction: column; }
  .wr-consent__actions .wr-btn { width: 100%; min-width: 0; }
}

/* ⚠️  SUR UN ÉCRAN TRÈS BAS, LA BOÎTE DÉFILE.

       Un téléphone en paysage fait 340 px de haut : la bannière dépliée
       couvrirait l'écran entier, boutons compris hors champ. */
@media (max-height: 520px) {
  .wr-consent__box { max-height: 82vh; overflow-y: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MENTION LÉGALE SOUS UN FORMULAIRE  (partials/wr-legal-accept.ejs, mention)

   ⚠️  DISCRÈTE MAIS LISIBLE.

       Ce n'est pas une case à cocher : rien ne bloque l'envoi. Elle informe
       de ce qu'on devra accepter à l'étape suivante. Trop pâle, elle ne
       remplit pas ce rôle — on ne peut pas dire qu'on a informé avec un
       texte que personne ne distingue du fond.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-legal-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wr-muted, #6B7280);
}

.wr-legal-note a {
  color: var(--wr-violet, #8A63C1);
  font-weight: 600;
  text-decoration: underline;
}
.wr-legal-note a:hover { color: var(--wr-violet-d, #6B47A6); }

/* ══════════════════════════════════════════════════════════════════════════
   LANGUE ET RÉGION — la liste déroulante du header (wr-langue-lieu.ejs)
   ══════════════════════════════════════════════════════════════════════════ */
.wr-ll { position: relative; flex: none; }

.wr-ll__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 9px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-pill, 100px);
  background: var(--wr-card, #fff);
  color: var(--wr-ink-2, #374151);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--wr-t, .15s), color var(--wr-t, .15s), box-shadow var(--wr-t, .15s);
}
.wr-ll__btn:hover,
.wr-ll.is-open .wr-ll__btn { border-color: var(--wr-violet-2, #A98AD3); color: var(--wr-violet-dark, #6B47A6); box-shadow: 0 4px 12px rgba(138, 99, 193, .12); }
.wr-ll__lang { font-weight: 800; letter-spacing: .04em; color: var(--wr-ink, #1E1B2E); }
.wr-ll__sep { width: 1px; height: 14px; background: var(--wr-line-2, #E5E9F0); }
.wr-ll__lieu { display: inline-flex; align-items: center; gap: 1px; min-width: 0; }
.wr-ll__lieutxt { text-transform: capitalize; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-ll__q { font-weight: 800; opacity: .6; }
.wr-ll__chevron { width: 11px; height: 11px; color: var(--wr-muted-2, #9CA3AF); flex: none; transition: transform var(--wr-t, .15s); }
.wr-ll.is-open .wr-ll__chevron { transform: rotate(180deg); }
.wr-ll__btn--devine .wr-ll__lieu { color: var(--wr-muted, #6B7280); }

/* Le panneau, ancré sous le bouton, aligné à droite. */
.wr-ll__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: 210px 300px;
  gap: 0;
  background: var(--wr-card, #fff);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-xl, 18px);
  box-shadow: 0 18px 48px rgba(30, 27, 46, .16);
  overflow: hidden;
  animation: wr-ll-in .16s ease-out;
}
.wr-ll__panel[hidden] { display: none; }
.wr-ll:not(.wr-ll--pays) .wr-ll__panel { grid-template-columns: 220px; }
@keyframes wr-ll-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wr-ll__panel { animation: none; } }

.wr-ll__col { padding: 14px; min-width: 0; margin: 0; }
.wr-ll__col--langues { background: var(--wr-bg, #FBFCFE); border-right: 1px solid var(--wr-line, #EEF1F7); }
.wr-ll:not(.wr-ll--pays) .wr-ll__col--langues { border-right: 0; background: var(--wr-card, #fff); }

.wr-ll__title {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--wr-muted, #6B7280);
}
.wr-ll__title svg { width: 14px; height: 14px; flex: none; color: var(--wr-violet, #8A63C1); }
.wr-ll__etat {
  margin-left: auto;
  padding: 2px 7px; border-radius: var(--wr-r-pill, 100px);
  background: var(--wr-acc-green, #D1FAE5); color: var(--wr-acc-green-fg, #047857);
  font-size: 9.5px; letter-spacing: .04em;
}
.wr-ll__etat.is-devine { background: var(--wr-bg-2, #F4F6FB); color: var(--wr-muted, #6B7280); }

/* Les langues */
.wr-ll__langs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wr-ll__langitem {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border-radius: 9px;
  color: var(--wr-ink, #1E1B2E);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
}
a.wr-ll__langitem:hover { background: var(--wr-violet-softer, #F8F4FD); color: var(--wr-violet-dark, #6B47A6); }
.wr-ll__abbr {
  display: inline-grid; place-items: center;
  min-width: 28px; padding: 2px 5px;
  border-radius: 6px;
  background: var(--wr-violet-softer, #F8F4FD); color: var(--wr-violet-dark, #6B47A6);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
}
.wr-ll__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-ll__check { width: 14px; height: 14px; margin-left: auto; color: var(--wr-violet, #8A63C1); flex: none; }
.wr-ll__langitem.is-current { background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet-dark, #6B47A6); }
.wr-ll__langitem.is-current .wr-ll__abbr { background: var(--wr-violet, #8A63C1); color: #fff; }
.wr-ll__langitem.is-indispo { color: var(--wr-muted-2, #9CA3AF); cursor: not-allowed; }

/* Le pays */
.wr-ll__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wr-ll__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--wr-line-2, #E5E9F0);
  border-radius: var(--wr-r-pill, 100px);
  background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--wr-ink, #1E1B2E);
  cursor: pointer;
}
.wr-ll__chip:hover { border-color: var(--wr-violet-2, #A98AD3); }
.wr-ll__chip.is-current { border-color: var(--wr-violet, #8A63C1); background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet-dark, #6B47A6); }

.wr-ll__search {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--wr-line-2, #E5E9F0);
  border-radius: 10px;
  background: var(--wr-bg, #FBFCFE);
}
.wr-ll__search svg { width: 14px; height: 14px; color: var(--wr-muted-2, #9CA3AF); flex: none; }
.wr-ll__search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font: inherit; font-size: 13px; outline: none; color: var(--wr-ink, #1E1B2E); }
.wr-ll__search:focus-within { border-color: var(--wr-violet-2, #A98AD3); background: #fff; }

.wr-ll__countries {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 228px; overflow-y: auto;
  display: grid; gap: 1px;
  overscroll-behavior: contain;
}
.wr-ll__countries li[hidden] { display: none; }
.wr-ll__country {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border: 0; border-radius: 8px;
  background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--wr-ink, #1E1B2E);
  text-align: left; cursor: pointer;
}
.wr-ll__country:hover { background: var(--wr-violet-softer, #F8F4FD); }
.wr-ll__country.is-current { background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet-dark, #6B47A6); font-weight: 700; }
.wr-ll__cflag { width: 18px; text-align: center; flex: none; }
.wr-ll__cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-ll__ccount { font-size: 11px; color: var(--wr-muted-2, #9CA3AF); font-variant-numeric: tabular-nums; }
.wr-ll__vide { margin: 10px 2px 0; font-size: 12.5px; color: var(--wr-muted, #6B7280); }
.wr-ll__vide[hidden] { display: none; }
.wr-ll__clear {
  margin-top: 10px; padding: 0;
  border: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--wr-muted, #6B7280);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.wr-ll__clear:hover { color: var(--wr-violet-dark, #6B47A6); }

@media (max-width: 900px) {
  /* Le header est plein : la langue et l'icône restent, le pays part. */
  .wr-ll__sep, .wr-ll__lieu, .wr-ll__chevron { display: none; }
  .wr-ll__btn { padding: 6px 9px; gap: 5px; }

  /* Le panneau prend la largeur de l'écran, sous le header, en une colonne. */
  .wr-ll__panel {
    position: fixed;
    top: calc(var(--wr-header-h, 68px) + 4px);
    left: 12px; right: 12px;
    grid-template-columns: 1fr !important;
    max-height: calc(100vh - var(--wr-header-h, 68px) - 20px);
    overflow-y: auto;
  }
  .wr-ll__col--langues { border-right: 0; border-bottom: 1px solid var(--wr-line, #EEF1F7); }
  .wr-ll__langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   AVATAR PAR DÉFAUT — l'image remplit sa pastille, quelle que soit la
   pastille (voir public/js/wr-avatar.js et /img/avatar-defaut.svg).
   ══════════════════════════════════════════════════════════════════════ */
.avatar img, .wr-user__avatar img, .wr-conv__avatar img, .wr-swipe__avatar img,
.wr-cvp__avatar img, .wr-pf__avatar img, .wr-tun-user__pic img, .wv-ava img,
.wr-recu__avatar img, .wr-logo--sm img, .wr-m__avatar img, .user-menu__btn .avatar img,
img[data-avatar] {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.wr-cvp__avatar--letter img { width: 100%; height: 100%; }
/* 10/11/2026 — L'AVATAR DE LA FICHE CANDIDAT EST UNE IMAGE SEULE, SANS
   PASTILLE AUTOUR : la règle `img[data-avatar]` ci-dessus (100 % du
   parent, plus spécifique que `.wr-cand__avatar`) lui donnait toute la
   largeur de l'en-tête — une silhouette géante et le nom écrasé à côté.
   On lui rend sa taille, avec une spécificité supérieure. */
img.wr-cand__avatar[data-avatar] {
  width: 64px; height: 64px; min-width: 64px; max-width: 64px;
  border-radius: 50%; object-fit: cover; flex: 0 0 64px; display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   « À DÉCOUVRIR » — trois entreprises au hasard dans l'annuaire (30/10/2026)

   Glissé après la quatrième fiche, mais HORS de la liste : la liste est
   dans l'ordre des dernières inscrites, ce tirage n'a pas d'ordre. D'où un
   encadré de couleur, son titre, et des fiches sur fond blanc à l'intérieur
   — on ne doit pas pouvoir le confondre avec la suite du classement.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-decouvrir {
  margin: 18px 0;
  padding: 16px;
  border-radius: var(--wr-r-xl);
  background: var(--wr-violet-soft);
  border: 1px dashed rgba(138, 99, 193, .45);
}
.wr-decouvrir__tete { display: flex; align-items: flex-start; gap: 12px; margin: 2px 4px 14px; }
.wr-decouvrir__icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--wr-violet); color: #fff;
}
.wr-decouvrir__titre { margin: 0; font-size: 15px; font-weight: 800; color: var(--wr-ink); line-height: 1.3; }
.wr-decouvrir__texte { margin: 2px 0 0; font-size: 13px; color: var(--wr-muted); }
.wr-decouvrir__liste { border-color: rgba(138, 99, 193, .18); box-shadow: var(--wr-shadow); }
.wr-decouvrir__liste .wr-row:hover { background: var(--wr-violet-softer); }
@media (max-width: 600px) {
  .wr-decouvrir { padding: 12px; margin: 14px 0; }
  .wr-decouvrir__tete { margin: 0 2px 12px; }
}