/* ============================================================================
   Becomunity — la charte.
   Partagée par l'espace membre, le wiki, l'administration, les pages de vente.

   L'atelier, pas le tableau de bord : l'encre porte les outils, le papier
   porte la lecture, le laiton désigne ce sur quoi on agit. Le témoin et la
   pousse ne disent qu'un état — jamais une décoration.

   Les noms de classes n'ont pas bougé : seules leurs valeurs changent, et la
   plateforme suit sans qu'on ouvre une page.

   Douze contrôles gardent cette charte — voir outils/recette-design.js.
   ========================================================================== */

/*  Servie par le serveur, jamais par une adresse extérieure : une police tirée
    d'un CDN tombe en silence le jour où il est bloqué, et toute la mise en
    page saute sans qu'on comprenne pourquoi. Fichier variable : une seule
    requête couvre toutes les graisses. */
@font-face {
  font-family: "Jost";
  src: url("/assets/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* --- fonds et texte --- */
  --bg:        #FAF8F4;   /* papier */
  --bg-soft:   #F2EFE9;
  --card:      #FFFFFF;
  --text:      #1B1E22;
  --muted:     #5C5B57;
  --faint:     #6E6C67;
  --line:      #E3DED5;
  --line-soft: #EFEBE4;
  /*  La frontière d'un champ ou d'un bouton doit atteindre 3:1 — le filet
      décoratif des cartes, non. Deux jetons pour deux rôles. */
  --line-fort: #948B7D;

  /* --- l'accent, seul --- */
  --accent:     #9A6B22;   /* laiton */
  --accent-2:   #D7A047;   /* laiton clair — sur fond sombre */
  /*  Le laiton du survol : assez foncé pour porter l'encre (6,2:1). */
  --accent-fort:#C88F35;
  --accent-soft:#F5EDDF;
  /*  Couleur de TEXTE accentué — un lien, un onglet ouvert, un chiffre qui
      compte. Plus sombre que le laiton d'aplat : #9A6B22 en texte ne donne
      que 4,4:1 sur le papier, sous le seuil de lisibilité. */
  --accent-ink: #8A5F1C;
  /*  Le texte posé SUR le laiton, lui, doit rester sombre quel que soit le
      thème : le bouton ne change pas de couleur, son texte non plus. */
  --sur-accent: #241704;
  /*  Sur le laiton D'ENCRE, en revanche, la règle s'inverse avec le thème :
      il est foncé sur papier et clair sur l'encre. Un texte sombre dessus
      donnait 1,9:1 en thème clair — l'option choisie était la moins lisible
      de la rangée, l'inverse de ce qu'elle doit être. */
  --sur-accent-ink: #FFFFFF;

  /* --- les états, qui ne sont pas des accents --- */
  --ok:         #3F7050;   /* pousse */
  --ok-soft:    #EAF1EC;
  --warn:       #8A5A16;
  --warn-soft:  #FAF3E6;
  --danger:     #B4402A;   /* témoin */
  --danger-soft:#F9EDEA;

  /* --- forme : presque droit. Un atelier, pas une application de téléphone --- */
  --radius:    3px;
  --radius-sm: 2px;

  /*  Trois ombres, pas une de plus, et réservées à ce qui flotte réellement
      au-dessus de la page : fenêtre, menu, message passager. Partout ailleurs,
      un filet d'un pixel sépare les surfaces. */
  --shadow-sm: 0 1px 2px rgba(20,24,28,.06);
  --shadow:    0 8px 24px rgba(20,24,28,.10);
  --shadow-lg: 0 24px 60px rgba(20,24,28,.22);

  /*  Vestige de l'ancienne charte, gardé parce que six pages l'emploient
      encore — mais ce n'est plus un dégradé, c'est un aplat. Un jeton absent
      ne casse pas bruyamment : il rend la règle muette et l'élément devient
      transparent. */
  --grad: var(--accent);

  --font: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*  La régie : sombre par défaut du système. Seuls les jetons sont redéfinis —
    aucune couleur ne vit uniquement ici, sinon elle ne s'appliquerait pas
    dans l'état « thème du système » et la page rendrait un texte clair sur
    fond clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #14181C;   /* encre */
    --bg-soft:   #1A2025;
    --card:      #1A2025;
    --text:      #EDE9E2;
    --muted:     #A19E96;
    --faint:     #8A8780;
    --line:      #252B31;
    --line-soft: #1E252B;
    --line-fort: #646F7A;

    --accent:     #D7A047;
    --accent-2:   #E8C285;
    --accent-fort:#D9B06E;
    --accent-soft:#2A2016;
    --accent-ink: #D7A047;
    --sur-accent: #241704;
    --sur-accent-ink: #241704;

    --ok:         #7DB392;
    --ok-soft:    #1B2620;
    --warn:       #D2A75E;
    --warn-soft:  #262017;
    --danger:     #E08A72;
    --danger-soft:#2A1B17;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
    --shadow:    0 8px 24px rgba(0,0,0,.40);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#14181C; --bg-soft:#1A2025; --card:#1A2025;
  --text:#EDE9E2; --muted:#A19E96; --faint:#8A8780;
  --line:#252B31; --line-soft:#1E252B; --line-fort:#646F7A;
  --accent:#D7A047; --accent-2:#E8C285; --accent-fort:#D9B06E; --accent-soft:#2A2016; --accent-ink:#D7A047; --sur-accent:#241704; --sur-accent-ink:#241704;
  --ok:#7DB392; --ok-soft:#1B2620; --warn:#D2A75E; --warn-soft:#262017;
  --danger:#E08A72; --danger-soft:#2A1B17;
  --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow:0 8px 24px rgba(0,0,0,.40); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/*  On doit pouvoir tout faire au clavier, et voir où l'on est. Un filet
    laiton, aucune lueur — la lueur appartenait à l'ancienne charte. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ----- Layout ----- */
.bca-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.bca-narrow   { max-width: 720px; }
.bca-main     { padding: 34px 0 80px; }
.bca-grid     { display: grid; gap: 16px; }
.bca-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bca-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 820px) { .bca-grid.cols-2, .bca-grid.cols-3 { grid-template-columns: 1fr; } }

/* ----- Top bar ----- */
.bca-topbar {
  position: sticky; top: 0; z-index: 40;
  height: 56px; display: flex; align-items: center; gap: 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.bca-footer { margin-top: 52px; padding: 24px 0; border-top: 1px solid var(--line); }
.bca-footer .bca-container { color: var(--muted); font-size: 13px; text-align: center; }
/*  Le nom ne se coupe pas en deux : « Espace / membre » sur deux lignes dans
    une barre de cinquante-six pixels donne l'impression d'un gabarit cassé. */
.bca-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; flex: 0 0 auto; }
/*  La marque : un carré d'encre, une fenêtre de laiton dedans. Le cadre d'un
    viseur, pas un dégradé. */
.bca-brand .logo {
  /*  Verrouillé à l'encre : avec `var(--text)` en fond, la fenêtre de laiton
      s'éclaircissait en même temps que lui et disparaissait (1,39:1). */
  width: 22px; height: 22px; border-radius: var(--radius-sm); background: #14181C;
  display: grid; place-items: center; color: #EDE9E2; position: relative;
}
.bca-brand .logo::after {
  content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px;
  border: 2px solid var(--accent-2); border-radius: 1px;
}
.bca-brand .logo svg { display: none; }
/*  Les entrées tiennent sur une ligne, quitte à défiler : « Machine à /
    bobine » replié sur deux lignes déformait la barre. */
.bca-nav {
  display: flex; align-items: center; gap: 1px; margin-left: auto;
  min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /*  Un voile au bord droit dit qu'il reste des entrées, sans barre de
      défilement. Ce n'est pas une couleur : c'est un masque. */
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
.bca-nav::-webkit-scrollbar { display: none; }
.bca-nav a {
  flex: 0 0 auto;
  padding: 7px 11px; border-radius: var(--radius-sm); color: var(--muted);
  font-weight: 400; font-size: 13.5px; white-space: nowrap;
  transition: color .12s, background .12s;
}
.bca-nav a:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
/*  La rubrique ouverte est soulignée d'un trait laiton, pas remplie d'une
    pastille colorée : elle se repère sans crier. */
.bca-nav a.active { color: var(--text); font-weight: 600; background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }

/*  Le bouton clair/sombre : une icône de la taille des rubriques voisines,
    sans cadre. C'est un réglage qu'on touche deux fois, pas une destination —
    il ne doit peser ni plus ni moins que les liens autour de lui. */
.bca-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; background: transparent; border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer;
  transition: color .12s, background .12s;
}
.bca-theme-btn:hover { background: var(--bg-soft); color: var(--text); }
.bca-theme-btn svg { display: block; }
/*  Dans l'admin le bouton porte aussi les classes du bouton discret : on lui
    rend sa forme carrée, sinon il s'étire au gabarit des libellés. */
.bca-btn.bca-theme-btn { width: 32px; min-width: 0; padding: 0; }

@media (max-width: 900px) {
  .bca-topbar { gap: 10px; }
  .bca-brand span:not(.logo) { display: none; }
  .bca-nav a { padding: 7px 9px; font-size: 13px; }
}

/* ----- Boutons -----
   Une seule action pleine par écran : celle qui reprend le travail. Le reste
   porte un filet. Un bouton nomme ce qui va se passer, jamais la porte qu'il
   ouvre — « Reprendre le montage », pas « Ouvrir ». */
.bca-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 15px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap; text-decoration: none;
}
.bca-btn-primary { background: var(--accent-2); color: var(--sur-accent); }
.bca-btn-primary:hover { background: var(--accent-fort); color: var(--sur-accent); text-decoration: none; }
.bca-btn-secondary { background: var(--card); color: var(--text); border-color: var(--line-fort); }
.bca-btn-secondary:hover { background: var(--bg-soft); text-decoration: none; }
.bca-btn-ghost { background: transparent; color: var(--muted); }
.bca-btn-ghost:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
.bca-btn-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
/*  Un bouton qu'on ne peut pas encore actionner reste lisible : il dit ce
    qu'il fera. À demi transparent sur fond papier, le laiton virait au beige
    et son texte disparaissait dedans — on ne savait plus ce qu'on attendait.
    Il perd donc sa couleur d'action, pas ses mots. */
.bca-btn[disabled] {
  cursor: not-allowed;
  background: var(--bg-soft); color: var(--faint);
  border-color: var(--line);
}
.bca-btn[disabled]:hover { background: var(--bg-soft); color: var(--faint); }
.bca-btn-sm { height: 31px; padding: 0 11px; font-size: 13px; }
.bca-btn-block { width: 100%; }

/* ----- Cartes ----- */
.bca-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.bca-card-pad { padding: 19px 21px; }
.bca-card-hover { transition: border-color .16s ease, background .16s ease; }
.bca-card-hover:hover { border-color: var(--accent); }
/*  L'icône de carte : un carré discret, plus une pastille de couleur. */
.bca-card-ico { color: var(--accent); display: flex; }

/* ----- Typographie -----
   Trois graisses : 400 pour lire, 600 pour les titres et les actions. Rien
   d'autre. Les titres portent un interlettrage négatif et se répartissent sur
   plusieurs lignes sans laisser un mot seul. */
.bca-h1 { font-size: 31px; font-weight: 600; letter-spacing: -.026em; line-height: 1.1; margin: 0 0 6px; text-wrap: balance; }
.bca-h2 { font-size: 19px; font-weight: 600; letter-spacing: -.012em; margin: 0 0 4px; text-wrap: balance; }
.bca-sub { color: var(--muted); font-size: 15px; margin: 0; max-width: 62ch; }
/*  Le surtitre classe l'objet quand il dit vraiment de quoi il s'agit —
    jamais pour décorer. */
.bca-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-ink); }
.bca-muted { color: var(--muted); }
.bca-mono { font-family: var(--mono); font-size: 12.5px; }

/* ----- Pastilles d'état -----
   Trois seulement : passé, bloqué, sans objet. Presque droites, comme le
   reste — l'ancienne pastille en gélule appartenait à une autre charte. */
.bca-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 8px;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--bg-soft); color: var(--muted);
}
.bca-badge.ok { background: var(--ok-soft); color: var(--ok); }
.bca-badge.warn { background: var(--warn-soft); color: var(--warn); }
.bca-badge.err { background: var(--danger-soft); color: var(--danger); }
.bca-badge.new { background: var(--accent-soft); color: var(--accent-ink); }

/* ----- Champs ----- */
.bca-field { display: block; margin-bottom: 14px; }
.bca-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.bca-input, .bca-textarea, .bca-select {
  width: 100%; font-family: var(--font); font-size: 14px; color: var(--text);
  background: var(--card); border: 1px solid var(--line-fort); border-radius: var(--radius-sm); padding: 10px 12px;
  transition: border-color .16s ease;
}
/*  Au foyer : le filet passe au laiton. Aucune lueur — elle ajoutait une
    quatrième ombre là où trois suffisent. */
.bca-input:focus, .bca-textarea:focus, .bca-select:focus {
  outline: none; border-color: var(--accent);
}
.bca-input:focus-visible, .bca-textarea:focus-visible, .bca-select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.bca-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.bca-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ----- Tables -----
   Filets horizontaux seulement. Les colonnes de nombres s'alignent à droite
   en chiffres de largeur fixe : un solde se compare d'un coup d'œil, sans
   lire — sinon les chiffres dansent d'une ligne à l'autre. */
.bca-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bca-table th, .bca-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.bca-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); font-weight: 600; white-space: nowrap;
}
.bca-table tr:hover td { background: var(--bg-soft); }
.bca-table td.num, .bca-table th.num, .bca-table .nombre {
  text-align: right; font-variant-numeric: tabular-nums;
}
/*  Une table large défile dans son propre cadre : la page, elle, ne part
    jamais de travers. */
.bca-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.bca-table-wrap .bca-table th:first-child, .bca-table-wrap .bca-table td:first-child { padding-left: 14px; }

/* ----- Rien à afficher ----- */
.bca-empty { text-align: center; padding: 52px 20px; color: var(--muted); }
/*  L'attente n'est pas un état vide : elle dure quelques secondes et ne
    mérite pas la moitié d'un panneau. */
/*  L'attente, en amorce de projection.
    Au milieu de l'écran, pas collée en haut : on attend le film, on ne lit pas
    un entrefilet. Le cercle de repère et son aiguille sont ceux qui défilaient
    avant la séance ; la bande perforée court derrière. */
.bca-empty.bca-attente { display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 62vh; padding: 30px 16px; font-size: 13.5px; }
.bca-empty.bca-attente .mot { margin: 22px 0 0; color: var(--muted); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; animation: bca-respire 2.4s ease-in-out infinite; }

.bca-amorce { position: relative; width: 128px; height: 128px; display: grid; place-items: center; }

/*  La bande perforée : quatre trous qui descendent en boucle, comme la
    pellicule qui passe devant la lampe. */
.bca-amorce .bande { position: absolute; inset: 0 50%; width: 128px; left: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background-image: radial-gradient(circle at 9px 12px, var(--line) 2.5px, transparent 3px),
    radial-gradient(circle at 119px 12px, var(--line) 2.5px, transparent 3px);
  background-size: 128px 32px; background-repeat: repeat-y;
  animation: bca-bande 1.4s linear infinite; }

/*  Le cercle de repère, et l'aiguille qui en fait le tour. */
.bca-amorce .cible { position: relative; width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid var(--line-fort); display: grid; place-items: center; }
.bca-amorce .cible::before, .bca-amorce .cible::after { content: ""; position: absolute;
  background: var(--line); }
.bca-amorce .cible::before { left: 6px; right: 6px; height: 1px; }
.bca-amorce .cible::after { top: 6px; bottom: 6px; width: 1px; }
.bca-amorce .cible b { width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--accent); }
/*  L'aiguille : un quart de disque en laiton qui balaie le cercle. */
.bca-amorce .cible i { position: absolute; inset: 2px; border-radius: 50%;
  background: conic-gradient(var(--accent-soft) 0 25%, transparent 25% 100%);
  animation: bca-balaie 1.6s linear infinite; }

@keyframes bca-bande  { to { background-position-y: -32px; } }
@keyframes bca-balaie { to { transform: rotate(360deg); } }
@keyframes bca-respire { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/*  Qui a demandé moins d'animation garde l'amorce, immobile et lisible : elle
    dit toujours qu'on attend, sans rien faire bouger. */
@media (prefers-reduced-motion: reduce) {
  .bca-amorce .bande, .bca-amorce .cible i, .bca-empty.bca-attente .mot { animation: none; }
}
.bca-empty .ico { font-size: 30px; margin-bottom: 8px; color: var(--faint); }

/* ----- Porte fermée ----- */
.bca-lock { max-width: 440px; margin: 9vh auto; text-align: center; }
.bca-lock .seal {
  width: 56px; height: 56px; border-radius: var(--radius); background: #14181C;
  display: grid; place-items: center; margin: 0 auto 18px;
}
.bca-lock .seal svg { width: 26px; height: 26px; color: var(--accent-2); }

/* ----- Texte long (wiki, articles) ----- */
.bca-prose { font-size: 16px; color: var(--text); max-width: 68ch; }
.bca-prose h1 { font-size: 27px; font-weight: 600; margin: 26px 0 10px; letter-spacing: -.02em; text-wrap: balance; }
.bca-prose h2 { font-size: 20px; font-weight: 600; margin: 24px 0 8px; letter-spacing: -.012em; }
.bca-prose h3 { font-size: 17px; font-weight: 600; margin: 18px 0 6px; }
.bca-prose p { margin: 0 0 13px; }
.bca-prose ul, .bca-prose ol { margin: 0 0 13px; padding-left: 22px; }
.bca-prose li { margin: 5px 0; }
.bca-prose code { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px 5px; font-family: var(--mono); font-size: 13px; }
.bca-prose pre { background: #14181C; color: #EDE9E2; padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; }
.bca-prose pre code { background: none; border: none; color: inherit; }
.bca-prose blockquote { margin: 0 0 13px; padding: 8px 15px; border-left: 2px solid var(--accent); background: var(--bg-soft); border-radius: 0; }

/* ----- Message passager ----- */
.bca-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 100; opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.bca-toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.bca-toast.err { background: var(--danger); color: var(--bg); }

/* ----- Confirmation maison -----
   La boîte du navigateur annonce le nom de domaine avant la question et
   ignore toute la charte : on la remplace, ici comme dans l'administration. */
.bca-cfm { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; max-width: 420px; width: 92vw; box-shadow: var(--shadow-lg); background: var(--card); color: var(--text); }
.bca-cfm::backdrop { background: rgba(20, 24, 28, .55); }
.bca-cfm[open] { animation: bcaCfmIn .16s ease-out; }
@keyframes bcaCfmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bca-cfm[open] { animation: none; } }
.bca-cfm-inner { padding: 24px 26px 6px; text-align: left; }
.bca-cfm-ico { display: none; }
.bca-cfm-title { font-weight: 600; font-size: 18px; letter-spacing: -.014em; margin-bottom: 8px; }
.bca-cfm-msg { color: var(--muted); font-size: 14px; line-height: 1.6; white-space: pre-line; }
.bca-cfm-foot { padding: 18px 26px 22px; display: flex; gap: 9px; justify-content: flex-end; }
.bca-cfm-foot .bca-btn { min-width: 110px; justify-content: center; }

/* ----- Utilitaires ----- */
.bca-row { display: flex; align-items: center; gap: 10px; }
.bca-row.wrap { flex-wrap: wrap; }
.bca-spacer { flex: 1; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:34px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.hidden { display: none !important; }

/*  Illustrations d'article : une capture vaut trois paragraphes, à condition
    qu'elle respire et qu'on sache ce qu'on regarde. */
.bca-figure { margin: 18px 0; }
.bca-figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bca-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* --- Icônes ---------------------------------------------------------------
   Dessinées à la couleur du texte qui les entoure, donc pas de variante à
   maintenir par fond. `flex:none` les empêche d'être comprimées dans une
   ligne serrée — un pictogramme aplati devient illisible. */
.bca-ico { display: inline-block; vertical-align: -0.18em; flex: none; }
/*  Une coche dans un tableau se lit d'un coup d'œil quand elle est verte :
    c'est la couleur qui dit « oui », pas la forme. */
.bca-ico.ok { color: var(--ok); }
.bca-ico + span, .bca-btn .bca-ico { vertical-align: middle; }
.bca-btn .bca-ico { margin-right: 6px; vertical-align: -0.22em; }
.bca-empty .ico .bca-ico { vertical-align: baseline; }