/* ══════════════════════════════════════════════════════════════════════════
   WHILERESUME — BACKOFFICE

   Un outil de travail, pas une vitrine. Trente-trois entrées de menu, des
   tableaux denses, de la modération. La lisibilité prime sur l'effet.

   ── PARTI PRIS ────────────────────────────────────────────────────────────

   La couleur ne décore jamais. Elle porte un état :

       vert    → actif, validé, en ligne
       ambre   → en attente, annulé mais encore valide
       rouge   → bloqué, remboursé, supprimé
       bleu    → Stripe / web
       violet  → RevenueCat / mobile
       gris    → neutre, expiré, sans objet

   Le même vocabulaire vaut pour un badge dans un tableau et pour l'entrée
   active du menu. On lit l'état d'une ligne sans lire le texte.

   ── STRUCTURE ─────────────────────────────────────────────────────────────

   .bo            grille : barre latérale + contenu
   .bo-side       navigation, ardoise sombre
   .bo__main      colonne de travail, surface claire
   .bo-top        barre supérieure collante
   .bo-page       zone de contenu

   Écrit à la main, sans framework. Les classes suivent la convention
   bloc__élément--variante.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ardoise : la barre latérale ── */
  --bo-slate-950: #0b1220;
  --bo-slate-900: #111a2b;
  --bo-slate-800: #1a2438;
  --bo-slate-700: #263349;
  --bo-slate-500: #64748b;
  --bo-slate-400: #94a3b8;
  --bo-slate-300: #cbd5e1;

  /* ── Surface : la zone de travail ── */
  --bo-bg:        #f6f7f9;
  --bo-surface:   #ffffff;
  --bo-line:      #e3e7ed;
  --bo-line-soft: #eef1f5;

  /* ── Texte ── */
  --bo-ink:       #16202e;
  --bo-ink-soft:  #4a5769;
  --bo-ink-mute:  #7b8798;

  /* ── Accent : vert profond ── */
  --bo-accent:      #0f766e;
  --bo-accent-dark: #0c5f58;
  --bo-accent-soft: #d5f0ec;
  --bo-accent-ink:  #0b4f49;

  /* ── États ── */
  --bo-ok:       #15803d;
  --bo-ok-soft:  #dcfce7;
  --bo-ok-ink:   #14532d;

  --bo-warn:      #b45309;
  --bo-warn-soft: #fef3c7;
  --bo-warn-ink:  #78350f;

  --bo-danger:      #b91c1c;
  --bo-danger-soft: #fee2e2;
  --bo-danger-ink:  #7f1d1d;

  --bo-blue:      #1d4ed8;
  --bo-blue-soft: #dbeafe;
  --bo-blue-ink:  #1e3a8a;

  --bo-violet:      #6d28d9;
  --bo-violet-soft: #ede9fe;
  --bo-violet-ink:  #4c1d95;

  /* ── Mesures ── */
  --bo-side-w: 264px;
  --bo-top-h:  60px;
  --bo-r:      10px;
  --bo-r-sm:   7px;

  --bo-shadow:    0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --bo-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

  --bo-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bo-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */

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

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

body.bo-body {
  margin: 0;
  font-family: var(--bo-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--bo-ink);
  background: var(--bo-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--bo-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
p  { margin: 0; }

svg { flex: none; }

/* Le focus reste visible partout : on navigue ce backoffice au clavier. */
:focus-visible {
  outline: 2px solid var(--bo-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARMATURE
   ══════════════════════════════════════════════════════════════════════════ */

.bo {
  display: grid;
  grid-template-columns: var(--bo-side-w) minmax(0, 1fr);
  min-height: 100vh;
}

.bo__main {
  min-width: 0;           /* sans ça, un tableau large déborde la grille */
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRE LATÉRALE
   ══════════════════════════════════════════════════════════════════════════ */

.bo-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bo-slate-950);
  border-right: 1px solid var(--bo-slate-800);
}

.bo-side__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: var(--bo-top-h);
  flex: none;
  border-bottom: 1px solid var(--bo-slate-800);
}

/* Le carré d'accent : seule touche de couleur pleine du menu. */
.bo-side__mark {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--bo-accent);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.02em;
}

.bo-side__name {
  color: #fff;
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bo-side__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px 20px;
}

/* Barre de défilement discrète — 33 entrées, elle sert souvent. */
.bo-side__nav::-webkit-scrollbar { width: 8px; }
.bo-side__nav::-webkit-scrollbar-thumb {
  background: var(--bo-slate-700);
  border-radius: 4px;
  border: 2px solid var(--bo-slate-950);
}
.bo-side__nav::-webkit-scrollbar-thumb:hover { background: var(--bo-slate-500); }

.bo-side__label {
  padding: 16px 10px 6px;
  color: var(--bo-slate-500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.bo-side__nav > .bo-side__label:first-child { padding-top: 4px; }

/* ⚠️  LE STYLE DE `.bo-side__univers` A ÉTÉ DÉPLACÉ EN FIN DE FICHIER.

   Il était ici, avec `color: var(--bo-violet)` — du violet FONCÉ (#6D28D9)
   sur une barre latérale en `--bo-slate-950`. Sur un fond clair, c'est
   l'accent de la marque ; sur celui-ci, c'était illisible.

   La version qui fait foi est dans le bloc « groupes dépliables et rail »,
   avec un violet clair. Une seule déclaration, à la fin, là où vivent aussi
   les règles du repli qui la complètent. */


.bo-side__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: var(--bo-r-sm);
  color: var(--bo-slate-300);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .13s ease, color .13s ease;
}
.bo-side__link:hover {
  background: var(--bo-slate-800);
  color: #fff;
  text-decoration: none;
}
.bo-side__link svg {
  width: 17px;
  height: 17px;
  opacity: .65;
  transition: opacity .13s ease;
}
.bo-side__link:hover svg { opacity: 1; }

/* L'entrée active : fond teinté + filet d'accent à gauche. Le même vert que
   les badges « actif » — la couleur dit toujours la même chose. */
.bo-side__link.is-active {
  position: relative;
  background: color-mix(in srgb, var(--bo-accent) 20%, var(--bo-slate-900));
  color: #fff;
  font-weight: 600;
}
.bo-side__link.is-active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--bo-accent);
}
.bo-side__link.is-active svg { opacity: 1; }

.bo-side__sub {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--bo-slate-800);
  color: var(--bo-slate-400);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bo-side__link.is-active .bo-side__sub {
  background: var(--bo-accent);
  color: #fff;
}

.bo-side__foot {
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--bo-slate-800);
}
.bo-side__foot .bo-side__link { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   BARRE SUPÉRIEURE
   ══════════════════════════════════════════════════════════════════════════ */

.bo-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--bo-top-h);
  padding: 0 20px;
  flex: none;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--bo-line);
}

/* ⚠️  MASQUÉ SUR GRAND ÉCRAN — voir le commentaire du gabarit.

   Les boutons de produit prennent sa place, et reprennent son
   `margin-right: auto` : c'est lui qui repousse les sélecteurs de langue à
   droite. Sans ça, tout se tasserait à gauche. */
.bo-top__title {
  display: none;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -.01em;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .bo-top__title { display: block; }
}

.bo-burger {
  display: none;          /* mobile seulement */
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r-sm);
  background: var(--bo-surface);
  color: var(--bo-ink-soft);
  cursor: pointer;
}
.bo-burger svg { width: 18px; height: 18px; }
.bo-burger:hover { background: var(--bo-bg); }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.bo-page {
  flex: 1;
  padding: 22px 20px 56px;
  max-width: 1500px;
  width: 100%;
}

.bo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bo-head p {
  margin-top: 3px;
  color: var(--bo-ink-mute);
  font-size: 13.5px;
}

.bo-title { font-size: 15.5px; font-weight: 650; }
.bo-sub   { color: var(--bo-ink-mute); font-size: 13px; margin-top: 3px; }
.bo-muted { color: var(--bo-ink-mute); font-weight: 400; }
.bo-xs    { font-size: 12.5px; }

.bo-flex  { display: flex; align-items: center; flex-wrap: wrap; }
.bo-gap-1 { gap: 6px; }
.bo-gap-2 { gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   CARTES
   ══════════════════════════════════════════════════════════════════════════ */

.bo-card {
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  box-shadow: var(--bo-shadow);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   ⚠️  `bo-card__head` ET `bo-card__title` N'AVAIENT AUCUNE RÈGLE.

   Elles sont pourtant employées depuis longtemps — la fiche d'une offre en
   compte cinq, l'écran des langues une. Sans règle, l'en-tête était un
   `<div>` nu : collé au bord, sans séparation, avec un titre en taille et
   graisse de texte courant. Les cartes paraissaient bâclées, et l'on
   cherchait le défaut dans le gabarit alors qu'il n'y avait rien à y voir.

   Une classe absente ne casse rien et ne fait rien : c'est précisément ce
   qui la rend difficile à repérer. `bo-card__body` était définie juste en
   dessous, ce qui achevait de brouiller la piste — le corps avait sa marge,
   l'en-tête non.
   ══════════════════════════════════════════════════════════════════════ */
.bo-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bo-line-soft);
}

.bo-card__title {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--bo-ink);
}

/* Le corps qui suit un en-tête n'a pas besoin d'un second trait : celui de
   l'en-tête fait déjà la séparation. */
.bo-card__head + .bo-card__body { border-top: 0; }

.bo-card__body { padding: 16px; }
.bo-card__body + .bo-card__body { border-top: 1px solid var(--bo-line-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   COMPTEURS

   Chiffres alignés en tabulaire : on compare deux lignes d'un coup d'œil.
   ══════════════════════════════════════════════════════════════════════════ */

.bo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.bo-stat {
  padding: 14px 16px;
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  box-shadow: var(--bo-shadow);
}

.bo-stat__num,
.bo-stat__value {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--bo-ink);
}

.bo-stat__label {
  margin-top: 3px;
  color: var(--bo-ink-mute);
  font-size: 12.5px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLEAUX

   Le cœur de l'outil. En-tête collant : on garde ses repères en défilant une
   longue liste.
   ══════════════════════════════════════════════════════════════════════════ */

.bo-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.bo-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 14px;
  background: var(--bo-bg);
  border-bottom: 1px solid var(--bo-line);
  color: var(--bo-ink-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  text-align: left;
  white-space: nowrap;
}

.bo-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bo-line-soft);
  vertical-align: middle;
}

.bo-table tbody tr:last-child td { border-bottom: 0; }
.bo-table tbody tr { transition: background .1s ease; }
.bo-table tbody tr:hover { background: var(--bo-bg); }

/* Les nombres s'alignent : comparer une colonne de montants doit être
   immédiat. */
.bo-table td strong { font-variant-numeric: tabular-nums; font-weight: 650; }

/* La deuxième ligne d'une cellule — e-mail sous un nom, agence sous un
   client. Présente sans concurrencer. */
.bo-table__sub {
  margin-top: 1px;
  color: var(--bo-ink-mute);
  font-size: 12px;
  line-height: 1.4;
}

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

   La couleur porte l'état, jamais l'ornement.
   ══════════════════════════════════════════════════════════════════════════ */

.bo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bo-line-soft);
  color: var(--bo-ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.bo-badge--success { background: var(--bo-ok-soft);     color: var(--bo-ok-ink); }
.bo-badge--warning { background: var(--bo-warn-soft);   color: var(--bo-warn-ink); }
.bo-badge--danger  { background: var(--bo-danger-soft); color: var(--bo-danger-ink); }
.bo-badge--blue    { background: var(--bo-blue-soft);   color: var(--bo-blue-ink); }
.bo-badge--violet  { background: var(--bo-violet-soft); color: var(--bo-violet-ink); }
.bo-badge--muted   { background: var(--bo-line-soft);   color: var(--bo-ink-mute); }

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

.bo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--bo-r-sm);
  background: var(--bo-accent);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s ease, border-color .13s ease;
}
.bo-btn:hover { background: var(--bo-accent-dark); text-decoration: none; }
.bo-btn svg { width: 15px; height: 15px; }

.bo-btn--primary { background: var(--bo-accent); color: #fff; }
.bo-btn--primary:hover { background: var(--bo-accent-dark); }

.bo-btn--secondary {
  background: var(--bo-surface);
  border-color: var(--bo-line);
  color: var(--bo-ink);
}
.bo-btn--secondary:hover { background: var(--bo-bg); border-color: #d3dae3; }

.bo-btn--danger { background: var(--bo-danger); color: #fff; }
.bo-btn--danger:hover { background: #991b1b; }

.bo-btn--sm { padding: 5px 10px; font-size: 12.5px; }
.bo-btn--sm svg { width: 13px; height: 13px; }

.bo-btn--block { width: 100%; }

.bo-btn:disabled,
.bo-btn[disabled] { opacity: .5; cursor: not-allowed; }

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

.bo-field { display: block; margin-bottom: 14px; }

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

.bo-input,
.bo-select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r-sm);
  background: var(--bo-surface);
  color: var(--bo-ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  transition: border-color .13s ease, box-shadow .13s ease;
}

.bo-input::placeholder { color: var(--bo-ink-mute); }

.bo-input:focus,
.bo-select:focus {
  outline: 0;
  border-color: var(--bo-accent);
  box-shadow: 0 0 0 3px var(--bo-accent-soft);
}

.bo-select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8798' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  cursor: pointer;
}

.bo-select--sm {
  width: auto;
  padding: 5px 28px 5px 9px;
  font-size: 12.5px;
  background-size: 13px;
}

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

.bo-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
}
.bo-checkbox input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--bo-accent);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   UNE CASE À COCHER AVEC SON EXPLICATION

   ⚠️  `align-items: flex-start`, ET NON `center` COMME `.bo-checkbox`.

       Ici l'étiquette fait deux ou trois lignes. Centré verticalement, le
       carré de la case se retrouve au milieu du paragraphe, à côté de la
       deuxième ligne : on ne voit plus ce qu'il coche.

   La zone cliquable couvre le texte entier — viser un carré de 15 px quand
   on a un paragraphe sous la main n'a aucune raison d'être.
   ══════════════════════════════════════════════════════════════════════════ */
.bo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
}

.bo-check input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--bo-accent);
  cursor: pointer;
}

.bo-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
.bo-check input[type="checkbox"]:disabled ~ span { opacity: .6; }

.bo-check > span { display: block; }

/* Un filet de séparation entre deux groupes d'un même bloc. */
.bo-sep {
  border: 0;
  border-top: 1px solid var(--bo-line, #E5E9F0);
}

/* ══════════════════════════════════════════════════════════════════════════
   MESSAGES

   Un message dit ce qui s'est passé et ce qu'il reste à faire. Le filet de
   gauche porte l'état — même code couleur que les badges.
   ══════════════════════════════════════════════════════════════════════════ */

.bo-alert {
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--bo-line);
  border-left: 3px solid var(--bo-ink-mute);
  border-radius: var(--bo-r-sm);
  background: var(--bo-surface);
  color: var(--bo-ink);
  font-size: 13.5px;
}
.bo-alert a { text-decoration: underline; }

.bo-alert--success {
  border-color: color-mix(in srgb, var(--bo-ok) 25%, var(--bo-line));
  border-left-color: var(--bo-ok);
  background: var(--bo-ok-soft);
  color: var(--bo-ok-ink);
}
.bo-alert--info {
  border-color: color-mix(in srgb, var(--bo-accent) 25%, var(--bo-line));
  border-left-color: var(--bo-accent);
  background: var(--bo-accent-soft);
  color: var(--bo-accent-ink);
}
.bo-alert--warning {
  border-color: color-mix(in srgb, var(--bo-warn) 25%, var(--bo-line));
  border-left-color: var(--bo-warn);
  background: var(--bo-warn-soft);
  color: var(--bo-warn-ink);
}
.bo-alert--danger {
  border-color: color-mix(in srgb, var(--bo-danger) 25%, var(--bo-line));
  border-left-color: var(--bo-danger);
  background: var(--bo-danger-soft);
  color: var(--bo-danger-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDE

   Un écran vide invite à agir, il ne s'excuse pas.
   ══════════════════════════════════════════════════════════════════════════ */

.bo-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--bo-ink-mute);
}
.bo-empty p { font-size: 13.5px; }
.bo-empty .bo-btn { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */

.bo-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 14px;
  border-top: 1px solid var(--bo-line-soft);
}

.bo-pager a,
.bo-pager span {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r-sm);
  background: var(--bo-surface);
  color: var(--bo-ink-soft);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bo-pager a:hover { background: var(--bo-bg); text-decoration: none; }

.bo-pager .is-active,
.bo-pager [aria-current="page"] {
  background: var(--bo-accent);
  border-color: var(--bo-accent);
  color: #fff;
  font-weight: 650;
}

.bo-pager .is-disabled { opacity: .4; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════
   CODE
   ══════════════════════════════════════════════════════════════════════════ */

.bo-code,
code.bo-xs,
.bo-table code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bo-line-soft);
  color: var(--bo-ink-soft);
  font-family: var(--bo-mono);
  font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALES

   La modale est un confort : la vérification sérieuse se fait côté serveur.
   Elle ralentit un geste irréversible, elle ne le sécurise pas.
   ══════════════════════════════════════════════════════════════════════════ */

.bo-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ⚠️  L'ouverture se fait en retirant l'attribut `hidden` — c'est ce que
   posent les templates. Le sélecteur doit donc porter sur [hidden], pas sur
   une classe : sinon la modale s'affiche dès le chargement de la page. */
.bo-modal[hidden] { display: none; }

.bo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, .55);
  backdrop-filter: blur(2px);
}

.bo-modal__box {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--bo-surface);
  border-radius: 12px;
  box-shadow: var(--bo-shadow-lg);
  animation: bo-modal-in .16s ease-out;
}

@keyframes bo-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.bo-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 0;
}

.bo-modal__icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bo-danger-soft);
  color: var(--bo-danger);
}
.bo-modal__icon svg { width: 19px; height: 19px; }

.bo-modal__title { font-size: 15.5px; font-weight: 650; padding-top: 6px; }

.bo-modal__body {
  padding: 12px 18px 0;
  overflow-y: auto;
  color: var(--bo-ink-soft);
  font-size: 13.5px;
}

/* Ce que la suppression emporte avec elle. Énumérer évite la mauvaise
   surprise. */
.bo-modal__list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.bo-modal__hint {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--bo-r-sm);
  background: var(--bo-warn-soft);
  color: var(--bo-warn-ink);
  font-size: 12.5px;
}

.bo-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px;
}

/* Le bouton qui confirme. Rouge : il n'y a pas de retour en arrière. */
.bo-modal__danger {
  background: var(--bo-danger);
  color: #fff;
}
.bo-modal__danger:hover:not(:disabled) { background: #991b1b; }

/* ══════════════════════════════════════════════════════════════════════════
   MENU MOBILE
   ══════════════════════════════════════════════════════════════════════════ */

.bo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(11, 18, 32, .5);
}
.bo-backdrop.is-active { display: block; }

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

.bo-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--bo-slate-950);
}

.bo-login__box {
  width: 100%;
  max-width: 372px;
  padding: 30px;
  background: var(--bo-surface);
  border-radius: 12px;
  box-shadow: var(--bo-shadow-lg);
}

.bo-login__head { text-align: center; margin-bottom: 22px; }

.bo-login__mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--bo-accent);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
}

.bo-login__title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.bo-login__sub   { margin-top: 3px; color: var(--bo-ink-mute); font-size: 13px; }
.bo-login__foot  { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--bo-ink-mute); }

/* ══════════════════════════════════════════════════════════════════════════
   CARTE

   pointX = longitude, pointY = latitude. L'inversion est dans les données,
   pas ici — mais elle se voit d'abord sur la carte.
   ══════════════════════════════════════════════════════════════════════════ */

.bo-map-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }

.bo-map-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--bo-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   FICHE CANDIDAT
   ══════════════════════════════════════════════════════════════════════════ */

.cv-sec { margin-bottom: 14px; }

.cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.cv-grid-3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.cv-chips,
.cv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.cv-chip {
  padding: 2px 9px;
  border: 1px solid var(--bo-line);
  border-radius: 20px;
  background: var(--bo-bg);
  color: var(--bo-ink-soft);
  font-size: 12.5px;
  font-weight: 500;
}

.cv-item {
  padding: 11px 0;
  border-bottom: 1px solid var(--bo-line-soft);
}
.cv-item:last-child { border-bottom: 0; padding-bottom: 0; }

.cv-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.cv-item__t { font-weight: 600; font-size: 13.5px; }

.cv-rm { color: var(--bo-ink-mute); font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   ADAPTATION

   Sous 1024px la barre latérale sort du flux et coulisse. Le contenu occupe
   toute la largeur : sur un écran étroit, la place va aux données.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .bo { grid-template-columns: 1fr; }

  .bo-side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: var(--bo-side-w);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .bo-side.is-active { transform: none; }

  .bo-burger { display: inline-flex; }
}

@media (max-width: 640px) {
  .bo-page { padding: 16px 14px 44px; }
  .bo-top  { padding: 0 14px; }

  h1 { font-size: 19px; }

  .bo-head { margin-bottom: 16px; }

  .bo-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .bo-stat  { padding: 12px 13px; }
  .bo-stat__num, .bo-stat__value { font-size: 22px; }

  .bo-table thead th { padding: 8px 11px; }
  .bo-table tbody td { padding: 10px 11px; }

  .bo-card__body { padding: 13px; }

  /* Les filtres passent en pile : à côté, ils deviennent illisibles. */
  .bo-card__body.bo-flex { display: block; }
  .bo-card__body.bo-flex .bo-field { margin-bottom: 10px; }
  .bo-card__body.bo-flex .bo-select { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRÉFÉRENCES SYSTÈME
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .bo-side, .bo-top, .bo-pager, .bo-btn, .bo-backdrop { display: none !important; }
  .bo { grid-template-columns: 1fr; }
  .bo-page { padding: 0; max-width: none; }
  .bo-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .bo-table thead th { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════
   ÉDITEUR DE TEXTE ENRICHI (bo-editor.js)
   ══════════════════════════════════════════════════════════════════════ */

.bo-ed {
  width: 100%;
  border: 1px solid var(--bo-line, #E5E9F0);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.bo-ed__bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 8px;
  background: var(--bo-bg, #F7F8FB);
  border-bottom: 1px solid var(--bo-line, #E5E9F0);
}

.bo-ed__btn {
  min-width: 30px; height: 28px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 7px;
  background: none; color: var(--bo-ink, #1E2330);
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.bo-ed__btn:hover { background: #fff; border-color: var(--bo-line, #E5E9F0); }

.bo-ed__toggle {
  margin-left: auto; height: 28px; padding: 0 10px;
  border: 1px solid var(--bo-line, #E5E9F0); border-radius: 7px;
  background: #fff; color: var(--bo-ink-mute);
  font-size: 12px; font-family: inherit; cursor: pointer;
}
.bo-ed__toggle:hover { color: var(--bo-ink, #1E2330); }

/* ⚠️  UNE HAUTEUR MINIMALE, PAS FIXE.

   La zone grandit avec le texte : une description de fiche fait trois
   lignes ou trois paragraphes selon l'entreprise, et une hauteur figée
   obligerait à défiler dans une boîte de 100 px. */
.bo-ed__area {
  min-height: 180px; max-height: 60vh; overflow-y: auto;
  padding: 12px 14px;
  font-size: 14px; line-height: 1.65; color: var(--bo-ink, #1E2330);
  outline: none;
}
.bo-ed__area:focus { box-shadow: inset 0 0 0 2px rgba(107, 71, 166, .12); }

.bo-ed__area h2 { font-size: 17px; margin: 14px 0 6px; }
.bo-ed__area h3 { font-size: 15px; margin: 12px 0 5px; }
.bo-ed__area p { margin: 0 0 10px; }
.bo-ed__area ul, .bo-ed__area ol { margin: 0 0 10px; padding-left: 22px; }
.bo-ed__area a { color: #6B47A6; }

/* Le textarea sous l'éditeur (mode « Code HTML ») : pleine largeur et
   police à chasse fixe, pour relire du balisage sans se tordre les yeux. */
.bo-ed textarea.bo-input {
  width: 100%; border: 0; border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; min-height: 220px;
}

/* ⚠️  TOUTES LES ZONES DE TEXTE PRENNENT LA LARGEUR DISPONIBLE.

   Sans cette règle, un `<textarea>` garde sa largeur par défaut — environ
   20 caractères — quelle que soit la card qui l'entoure. Les descriptions
   d'entreprise se rédigeaient dans un timbre-poste. */
textarea.bo-input { width: 100%; box-sizing: border-box; }

/* ── Barre d'actions groupées ────────────────────────────────────────── */
.bo-bulkbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px;
  border: 1px solid var(--bo-line, #E5E9F0); border-radius: 10px;
  background: var(--bo-bg, #F7F8FB);
  font-size: 13px;
}
.bo-bulkbar__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.bo-bulkbar__all { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.bo-bulkbar__all strong { color: #6B47A6; }

/* Les cases du tableau : assez grandes pour être visées sans effort. */
.bo-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: #6B47A6; cursor: pointer; }

/* ── Sélecteur de langue de CONTENU (barre du haut) ───────────────────────
   Distinct visuellement du sélecteur de langue d'interface, juste à côté :
   deux réglages voisins qui ne font pas la même chose. Le libellé les
   sépare autant que l'écart. */
.bo-clang {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 14px; padding: 3px 6px 3px 8px;
  border: 1px solid var(--bo-line, #E5E9F0); border-radius: 8px;
  background: var(--bo-bg, #F7F8FB);
}
.bo-clang__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bo-ink-mute);
  margin-right: 4px;
}
.bo-clang__item {
  padding: 2px 6px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--bo-ink-mute);
  text-decoration: none;
}
.bo-clang__item:hover { background: #fff; color: var(--bo-ink); }
.bo-clang__item.is-on { background: #6B47A6; color: #fff; }

@media (max-width: 720px) {
  /* Sur mobile la barre est déjà pleine : on garde les codes, on retire le
     libellé plutôt que tout le sélecteur. */
  .bo-clang__label { display: none; }
}

/* ── Onglets de statut ────────────────────────────────────────────────────
   Le compteur vit DANS l'onglet : il dit à la fois combien il y en a et où
   cliquer. C'est ce qui permet de supprimer le bloc de statistiques, qui
   affichait les mêmes nombres en double juste au-dessus. */
.bo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--bo-line, #E8EAEF);
}
.bo-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  color: var(--bo-ink-mute);
  font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.bo-tab:hover { color: var(--bo-ink); background: var(--bo-bg, #F7F8FA); }

/* L'onglet actif porte un trait sous le texte plutôt qu'un fond plein :
   il marque la position sans peser dans un écran déjà dense. */
.bo-tab.is-on {
  color: #6B47A6;
  border-bottom-color: #6B47A6;
  background: none;
}

.bo-tab__n {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: 11.5px; font-weight: 700;
}
.bo-tab.is-on .bo-tab__n { background: rgba(107, 71, 166, .12); color: #6B47A6; }

@media (max-width: 640px) {
  .bo-tab { padding: 8px 12px; font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LIEU ET RATTACHEMENT DANS LA LISTE DES OFFRES (bo-lieu)

   Deux colonnes se répondent : ce qui est écrit dans l'offre, et ce à quoi
   elle est rattachée. Chacune tient sur deux lignes — la ville, puis le
   pays en dessous — pour que la comparaison se fasse verticalement, d'un
   coup d'œil, sans élargir le tableau.
   ══════════════════════════════════════════════════════════════════════ */
.bo-lieu {
  font-size: 13px;
  line-height: 1.35;
  color: var(--bo-ink);
}

/* Le pays : plus discret que la ville, parce qu'il se déduit d'elle. */
.bo-lieu__sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--bo-ink-mute);
  margin-top: 2px;
}

/* ⚠️  « NON RATTACHÉE » NE DOIT PAS CRIER.

   Sur une base en cours de correction, l'immense majorité des lignes le
   sont. En rouge, le tableau entier virerait à l'alerte et l'on ne verrait
   plus rien. C'est un état de fait, pas une erreur : gris et en italique. */
.bo-lieu__vide {
  color: var(--bo-ink-mute);
  font-style: italic;
  font-size: 12.5px;
}

/* Rattaché à un pays sans ville — « Remote », « France entière ». */
.bo-lieu--zone { color: var(--bo-ink-soft); }

/* ⚠️  UNE RÉFÉRENCE BRUTE SE DISTINGUE PAR LA FONTE, PAS PAR UN BADGE.

   Un badge « réf. » collé à la valeur disait pourquoi la case montre
   « VIL-00004059 » plutôt qu'un nom — mais il doublait la largeur du
   contenu dans une colonne déjà étroite, et sur une base peu rattachée il
   se répétait sur chaque ligne.

   La fonte à chasse fixe suffit : un identifiant ne se lit pas comme un
   nom de ville, on le voit sans qu'on l'annonce. */
.bo-lieu--ref {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  font-size: 11.5px;
  color: var(--bo-ink-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRE LATÉRALE : GROUPES DÉPLIABLES ET RAIL

   Reprend la mécanique de l'espace candidat du site (`wr-side-collapse`),
   avec les couleurs du backoffice — fond ardoise, accent violet.

   ⚠️  ON N'A PAS RECOPIÉ LA PALETTE DU SITE.

       Le site est clair, ce backoffice est sombre. Transposer ses couleurs
       telles quelles aurait donné un contraste illisible sur `--bo-slate-950`.
       Ce qui est repris, c'est la FORME : la largeur du rail, la position du
       bouton, la rotation du chevron, la persistance de l'état. C'est ce
       qu'on reconnaît d'une interface à l'autre — pas le code hexadécimal.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── L'intitulé d'univers devient un bouton ── */
.bo-side__univers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 22px 0 2px;
  padding: 10px 10px 0;
  border: 0;
  border-top: 1px solid var(--bo-slate-800);
  background: none;
  color: var(--bo-accent-soft);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
}

.bo-side__univers:hover { color: #fff; }

.bo-side__nav > .bo-side__univers:first-of-type {
  margin-top: 8px;
  border-top: 0;
  padding-top: 0;
}

.bo-side__univers-chev {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: .7;
  transition: transform .15s ease;
}

/* Replié, le chevron pointe vers la droite : il annonce « déplier ». */
.bo-side__univers.is-ferme .bo-side__univers-chev { transform: rotate(-90deg); }

.bo-side__univers + .bo-side__groupe > .bo-side__label:first-child { padding-top: 8px; }

/* ── Le bouton de repli, en pied de barre ── */
.bo-side__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bo-slate-400);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.bo-side__toggle:hover { background: var(--bo-slate-800); color: #fff; }
.bo-side__toggle svg { width: 15px; height: 15px; flex: none; transition: transform .15s ease; }

/* ══════════════════════════════════════════════════════════════════════════
   LE RAIL

   ⚠️  UNE SEULE RÈGLE TOUCHE À LA GÉOMÉTRIE : la variable de largeur.

       Le site a payé cher la leçon — cinq règles concurrentes sur
       `grid-template-columns`, et le contenu qui tombait dans une colonne de
       68 px sur les pages sans barre. Ici, `.bo` lit `--bo-side-w`, et le
       rail ne change que cette variable. Rien d'autre ne la dispute.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .bo.is-side-collapsed { --bo-side-w: 68px; }
}

/* Les textes n'ont plus la place : on les retire de l'affichage. */
.bo-side.is-collapsed .bo-side__sub,
.bo-side.is-collapsed .bo-side__name,
.bo-side.is-collapsed .bo-side__label,
.bo-side.is-collapsed .bo-side__univers-nom,
.bo-side.is-collapsed .bo-side__togglelabel {
  display: none;
}

/* L'intitulé d'univers se réduit à son trait : il ne nomme plus rien, mais
   il continue de séparer. Sans lui, le rail serait une colonne d'icônes
   indifférenciées. */
.bo-side.is-collapsed .bo-side__univers {
  justify-content: center;
  padding: 8px 0 0;
  margin: 10px 0 2px;
}

.bo-side.is-collapsed .bo-side__head { justify-content: center; padding: 14px 0; }

.bo-side.is-collapsed .bo-side__link {
  position: relative;
  justify-content: center;
  gap: 0;
  padding: 10px 0;
  font-size: 0;          /* annule le libellé, pas l'icône */
  line-height: 0;
}

/* La taille rétablie sur l'icône : sans cette ligne elle disparaîtrait avec
   le texte, et le rail serait vide. */
.bo-side.is-collapsed .bo-side__link svg {
  width: 18px;
  height: 18px;
  font-size: 13px;
  flex: none;
}

/* La pastille passe en coin : centrée, elle recouvrirait l'icône. */
.bo-side.is-collapsed .bo-side__badge,
.bo-side.is-collapsed .bo-side__dot {
  position: absolute;
  top: 4px;
  right: 8px;
  transform: none;
}

.bo-side.is-collapsed .bo-side__toggle { justify-content: center; padding: 8px 0; }
.bo-side.is-collapsed .bo-side__toggle svg { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════════════════
   LES TROIS PRODUITS, DANS LA BARRE DU HAUT
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Le filet entre deux boutons ──
   Porté PAR le bouton, pas intercalé : un séparateur en élément à part
   s'ajouterait au `gap` et déséquilibrerait les intervalles. Posé en
   absolu au milieu de l'écart, il reste centré quoi qu'il arrive. */
/* ⚠️  ON N'ANIME PAS CEUX QUI ONT DEMANDÉ LE CONTRAIRE.

   `prefers-reduced-motion` n'est pas une préférence esthétique : pour une
   partie des gens, le mouvement déclenche des vertiges. L'information
   reste entière — couleur et soulignement subsistent, seule la transition
   disparaît. */
@media (prefers-reduced-motion: reduce) {
  }

/* ⚠️  ILS DISPARAISSENT AVANT DE DÉBORDER, ET LE TITRE REPREND LA PLACE.

   Sous 900 px, la barre porte le burger et deux sélecteurs de langue : cinq
   boutons de plus la font passer à la ligne. Ils s'effacent, et
   `.bo-top__title` réapparaît (voir sa règle) — sinon la barre ne dirait
   plus rien du tout. La barre latérale rend déjà ce service au doigt. */
@media (max-width: 900px) {
  }

/* ══════════════════════════════════════════════════════════════════════════
   LES MENUS DÉROULANTS DE LA BARRE DU HAUT
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️  CINQ BOUTONS NE TIENNENT PAS TOUJOURS.

   La barre du haut porte déjà le titre, deux sélecteurs de langue et « Voir
   le site ». Sous 1200 px, les deux entrées transverses passent à la
   trappe : les TROIS PRODUITS sont ce qu'on veut voir en premier, et
   « Commun » comme « Exploitation » restent à un clic dans la barre
   latérale. On sacrifie le raccourci, jamais l'accès. */
@media (max-width: 1200px) {
  }

/* ══════════════════════════════════════════════════════════════════════════
   FILTRES EN DEUX LIGNES, ET CASES À COCHER EN PASTILLES
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️  UNE GRILLE, PAS UN `flex-wrap`.

   En flex, les champs se répartissaient l'espace restant : le libellé le
   plus long décidait de la largeur de tous les autres, et une ligne passait
   au-dessous dès qu'on en ajoutait un. La grille garde des colonnes de
   largeur égale, et les deux lignes s'alignent verticalement. */
.bo-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.bo-filtres .bo-field { margin: 0; }

.bo-filtres__pied {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

/* ── Les pastilles ── */
.bo-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--bo-line-soft);
}

.bo-chips__titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--bo-ink-mute);
  min-width: 96px;
}

/* ⚠️  UNE VRAIE CASE, MASQUÉE — PAS UN BOUTON QUI L'IMITE.

   `position: absolute; opacity: 0` plutôt que `display: none` : une case
   masquée par `display` sort de l'ordre de tabulation, et la pastille
   devient inatteignable au clavier. Ici elle reste focusable, et
   `:focus-visible` porte le contour sur le libellé. */
.bo-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--bo-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  color: var(--bo-ink-soft);
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.bo-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.bo-chip:hover { border-color: var(--bo-accent); color: var(--bo-ink); }

/* ⚠️  L'ÉTAT COCHÉ SE LIT SANS LA COULEUR SEULE.

   Fond teinté ET bordure ET graisse : un daltonien, ou un écran mal réglé,
   doit pouvoir distinguer une pastille active d'une pastille au repos. */
.bo-chip:has(input:checked) {
  background: var(--bo-accent-soft);
  border-color: var(--bo-accent);
  color: var(--bo-accent-ink);
  font-weight: 600;
}

.bo-chip:has(input:focus-visible) {
  outline: 2px solid var(--bo-accent);
  outline-offset: 2px;
}

/* Repli pour les navigateurs sans `:has()` — le libellé reste lisible,
   seule la mise en évidence disparaît. */
@supports not selector(:has(*)) {
  .bo-chip input:checked + span { font-weight: 700; text-decoration: underline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR CHERCHABLE   [data-recherche]

   Le `<select>` d'origine reste dans le document : il porte la valeur, donc
   le formulaire s'envoie normalement. On le masque sans le retirer du flux
   d'accessibilité au point de le rendre inatteignable.
   ══════════════════════════════════════════════════════════════════════════ */
.bo-rsel { position: relative; }

/* ⚠️  `position: absolute; opacity: 0` PLUTÔT QUE `display: none`.

   Un `<select>` en `display: none` n'est plus soumis par certains
   navigateurs anciens, et sort de la validation HTML native (`required`
   cesse de bloquer l'envoi). Masqué ainsi, il reste un champ à part entière
   — il est simplement invisible et hors du chemin de la souris. */
.bo-rsel__natif {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Le bouton reprend l'allure d'un `.bo-select` : il le remplace à l'écran,
   il doit s'aligner avec les champs voisins au pixel près. */
.bo-rsel__btn {
  display: block;
  width: 100%;
  padding: 8px 30px 8px 11px;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r-sm);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--bo-ink);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Le chevron, dessiné en CSS : une icône de plus à charger pour une flèche
   serait payer cher un triangle. */
.bo-rsel__btn::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--bo-ink-mute);
  border-bottom: 2px solid var(--bo-ink-mute);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.bo-rsel__btn.is-vide { color: var(--bo-ink-mute); }
.bo-rsel__btn:hover { border-color: var(--bo-accent); }

.bo-rsel__btn:focus-visible {
  outline: 2px solid var(--bo-accent);
  outline-offset: 1px;
}

.bo-rsel__pan {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  background: #fff;
  box-shadow: var(--bo-shadow-lg);
}

.bo-rsel__pan[hidden] { display: none; }

.bo-rsel__q {
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r-sm);
  font: inherit;
  font-size: 13px;
}

.bo-rsel__q:focus { outline: none; border-color: var(--bo-accent); }

/* ⚠️  BORNÉE EN HAUTEUR, ET DÉFILANTE.

   Soixante entrées déroulées entières dépassent le bas de l'écran, et les
   dernières deviennent inatteignables sur un portable. */
.bo-rsel__liste {
  max-height: min(46vh, 320px);
  overflow-y: auto;
}

.bo-rsel__opt {
  padding: 7px 10px;
  border-radius: var(--bo-r-sm);
  font-size: 13px;
  color: var(--bo-ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `is-actif` suit le clavier, `is-choisi` marque la valeur en cours. Les
   deux doivent se distinguer : sinon, en parcourant à la flèche, on ne sait
   plus laquelle est sélectionnée et laquelle est survolée. */
.bo-rsel__opt.is-actif { background: var(--bo-bg); }

.bo-rsel__opt.is-choisi {
  background: var(--bo-accent-soft);
  color: var(--bo-accent-ink);
  font-weight: 600;
}

.bo-rsel__vide,
.bo-rsel__reste {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--bo-ink-mute);
}

.bo-rsel__reste {
  border-top: 1px solid var(--bo-line-soft);
  margin-top: 4px;
}

.bo-rsel__reste[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULAIRES — deux classes qui manquaient

   ⚠️  `.bo-textarea` ÉTAIT EMPLOYÉE SANS RÈGLE.

       Elle apparaît dans plusieurs gabarits d'administration. Sans règle, la
       zone de texte prenait le style par défaut du navigateur : police à
       chasse fixe, bordure en relief, aucun rapport avec les champs voisins.
       On mettait ça sur le compte du navigateur.

   ⚠️  `.bo-grid-2` A ÉTÉ INVENTÉE EN ÉCRIVANT L'ÉCRAN DE PROFIL.

       Deux champs côte à côte, c'est le besoin le plus courant d'un
       formulaire d'administration, et il n'existait pas — chacun le refaisait
       en style en ligne. Une classe évite la cinquième copie.
   ══════════════════════════════════════════════════════════════════════════ */
.bo-textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bo-ink);
  background: #FAFBFD;
  border: 1px solid var(--bo-line-soft);
  border-radius: var(--bo-r-sm);
  transition: border-color .15s, background .15s, box-shadow .15s;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}

.bo-textarea:focus {
  border-color: var(--bo-accent);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bo-accent) 14%, transparent);
}

.bo-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ⚠️  UNE SEULE COLONNE SOUS 720 px.

   Deux champs de 200 px côte à côte sur un téléphone : on voit la moitié de
   ce qu'on tape. La grille s'effondre avant que ça n'arrive. */
@media (max-width: 720px) {
  .bo-grid-2 { grid-template-columns: 1fr; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ⚠️  LES STYLES DES BOUTONS PRODUIT ONT ÉTÉ RETIRÉS AVEC EUX.

   `.bo-top__produits`, `.bo-top__produit`, `.bo-top__menu*` et
   `.bo-top__ancre` n'ont plus de balisage à habiller. Une règle sans cible
   ne casse rien — et c'est exactement ce qui la rend coûteuse : elle survit
   aux refontes, on la déplace, on l'adapte, sans jamais vérifier qu'elle
   sert encore.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le compteur de gabarits dans le sélecteur de langue des mails : discret,
   il ne doit pas concurrencer le code de langue qu'il accompagne. */
.bo-clang__n { opacity: .6; font-size: 11px; font-weight: 600; }
.bo-clang__item.is-on .bo-clang__n { opacity: .85; }


/* ══════════════════════════════════════════════════════════════════════════
   BARRE D'ACTIONS GROUPÉES — le rattachement de métier

   Un trait sépare les actions de publication du rattachement : ce sont deux
   natures d'opération, et les aligner sans marque laisse cliquer « Rattacher »
   en croyant publier.
   ══════════════════════════════════════════════════════════════════════════ */
.bo-bulk__sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  margin: 0 4px;
  background: rgba(255, 255, 255, .28);
}

/* Le champ compact de la barre : même hauteur que les boutons qui l'entourent,
   sinon la ligne se décale d'un pixel et l'œil le voit. */
.bo-input--sm {
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.3;
  border-radius: 8px;
}

/* Les formulaires par ligne du tableau des entreprises : ils ne portent que
   des champs cachés, mais un `<form>` reste un bloc — sans ça, la page gagne
   une ligne vide par entreprise. */
.bo-hidden-form { display: none; }

/* Bouton discret : pour les marqueurs internes d'une fiche (validation,
   vérification), qui ne doivent pas peser autant que la mise en production. */
.bo-btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--bo-muted, #6B7280);
}
.bo-btn--ghost:hover {
  background: var(--bo-bg, #F7F8FB);
  border-color: var(--bo-line, #E5E7EB);
  color: var(--bo-ink, #111827);
}


/* ══════════════════════════════════════════════════════════════════════════
   L'ADRESSE SUR UNE LIGNE — pays · code postal · ville · adresse

   Quatre colonnes ; l'adresse, la plus longue, en prend deux. Sous 900 px on
   revient à deux colonnes, sous 560 à une : quatre champs de 80 px ne se
   remplissent pas au doigt.
   ══════════════════════════════════════════════════════════════════════════ */
.bo-grid-adresse {
  display: grid;
  grid-template-columns: 1fr 120px 1.2fr 2fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 900px) { .bo-grid-adresse { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bo-grid-adresse { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   L'INTERRUPTEUR « EN PRODUCTION »

   Une case native, habillée en interrupteur : l'état se lit de loin — vert
   à droite, gris à gauche — sans avoir à déchiffrer une coche de 12 px. La
   case reste dans le DOM : c'est elle que le formulaire envoie et que le
   clavier manipule.
   ══════════════════════════════════════════════════════════════════════════ */
.bo-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.bo-switch input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.bo-switch__track {
  position: relative;
  width: 42px; height: 24px;
  border-radius: 100px;
  background: #D1D5DB;
  transition: background .15s;
  flex: 0 0 auto;
}

.bo-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, .25);
  transition: transform .15s;
}

.bo-switch input:checked + .bo-switch__track { background: #16A34A; }
.bo-switch input:checked + .bo-switch__track::after { transform: translateX(18px); }
.bo-switch input:focus-visible + .bo-switch__track { box-shadow: 0 0 0 3px rgba(22, 163, 74, .25); }

.bo-switch__label { font-size: 14px; }

/* Les paramètres masqués de la barre d'actions : `hidden` doit gagner sur le
   `display` de `.bo-input`, sinon le champ reste visible. */
.bo-bulkbar__actions [hidden] { display: none !important; }
.bo-bulkbar__actions { align-items: center; }


/* ══════════════════════════════════════════════════════════════════════════
   LES MODALS DU BACKOFFICE (<dialog class="bo-dialog">)

   Un `<dialog>` natif : le navigateur gère l'ouverture, l'échappement, le
   fond et le piège du focus. On ne lui donne qu'une apparence. Ces règles
   habillent aussi le dialogue « Rattachements », qui s'affichait brut.
   ══════════════════════════════════════════════════════════════════════════ */
.bo-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(17, 24, 39, .22);
  color: var(--bo-ink, #111827);
}

.bo-dialog::backdrop { background: rgba(17, 24, 39, .45); }

.bo-dialog__body { padding: 22px 24px 8px; }
.bo-dialog__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.bo-dialog__body .bo-sub { margin: 0 0 16px; }
.bo-dialog__body .bo-field { margin-bottom: 14px; }

.bo-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--bo-line, #E5E7EB);
}

/* Le dialogue « Rattachements » contient un tableau : il a besoin de plus
   de largeur que les trois modals de choix. */
#bo-rattach-entreprises { width: min(760px, calc(100vw - 32px)); }