/* ============================================================
   VISIODEV — DESIGN TOKENS
   Source de vérité : public/design/siteweb.html + Backoffice.html
   (exports Subframe — décoder avant lecture, voir .ai/rules)
   Ne jamais modifier une valeur sans mettre à jour la maquette.

   Deux origines, distinguées par les commentaires :
     [spec]   — VISIODEV.md §1, repris sans retrait
     [relevé] — absent de §1, relevé dans la maquette décodée.
                Chaque token porte son nombre d'usages et sa ligne.
   ============================================================ */

:root {
  /* ---------- COULEURS — SITE PUBLIC (thème sombre) ---------- */
  --vd-bg:            #08070A;   /* fond global */
  --vd-bg-panel:      #0A0509;   /* fond des scrims et surcouches */
  --vd-bg-86:   rgba(8,7,10,.86);    /* [relevé] L506 — en-tête au repos */
  --vd-bg-92:   rgba(8,7,10,.92);    /* [relevé] L1490 — barre de filtres collante */
  --vd-bg-94:   rgba(8,7,10,.94);    /* [relevé] L522 — scrim du hero */
  --vd-bg-96:   rgba(8,7,10,.96);    /* [relevé] L2765 — en-tête au scroll */
  --vd-bg-985:  rgba(8,7,10,.985);   /* [spec] fond du tiroir mobile */
  --vd-field-bg: rgba(0,0,0,.35);    /* [relevé] L756 — fond des champs */
  --vd-mask:     #000;               /* [relevé] L1493 — opacité du masque de défilement */
  --vd-panel-66: rgba(10,5,9,.66);   /* [relevé] L1210 — pastille de niveau sur photo */
  --vd-panel-78: rgba(10,5,9,.78);   /* [relevé] L1208 — scrim haut de vignette */
  --vd-panel-55: rgba(10,5,9,.55);   /* [relevé] L1208 — scrim bas de vignette */
  --vd-panel-12: rgba(10,5,9,.12);   /* [relevé] L1208 — palier médian du scrim */

  /* Dégradés du hero — arrêts intermédiaires, relevés L521 */
  --vd-halo-0:  #09060A;
  --vd-halo-1:  #0B0609;
  --vd-halo-2:  #4A0810;
  --vd-halo-3:  #A5101C;

  /* Arrêts translucides des halos secondaires */
  --vd-halo-red-30:    rgba(232,32,47,.30);    /* [relevé] L1380 — halo d'en-tête de page */
  --vd-halo-red-32:    rgba(232,32,47,.32);    /* [relevé] L958 */
  --vd-halo-red-34:    rgba(232,32,47,.34);    /* [relevé] L729 — halo du panneau de devis rapide */
  --vd-halo-orange-09: rgba(255,107,53,.09);   /* [relevé] L1380 */
  --vd-halo-orange-10: rgba(255,107,53,.10);   /* [relevé] L778 */
  --vd-halo-peach-32:  rgba(255,174,122,.32);  /* [relevé] L939 — halo du CTA des pages */
  --vd-halo-peach-34:  rgba(255,174,122,.34);  /* [relevé] L778 — halo du CTA de l'accueil */
  --vd-ink:           #F7F5F4;   /* texte principal */
  --vd-ink-warm:      #FFF8F5;   /* titre hero uniquement */

  /* Texte — échelle d'opacité (valeurs exactes de la maquette) */
  --vd-ink-85:  rgba(247,245,244,.85);  /* [relevé] 2x, L1040 */
  --vd-ink-82:  rgba(247,245,244,.82);  /* [relevé] 1x, L1847 */
  --vd-ink-80:  rgba(247,245,244,.80);
  --vd-ink-78:  rgba(247,245,244,.78);  /* [relevé] 2x, L807 */
  --vd-ink-75:  rgba(247,245,244,.75);  /* [relevé] 4x, L689 */
  --vd-ink-72:  rgba(247,245,244,.72);  /* [relevé] 4x, L626 */
  --vd-ink-70:  rgba(247,245,244,.70);  /* [relevé] 8x, L827 */
  --vd-ink-65:  rgba(247,245,244,.65);  /* [relevé] 6x, L1106 */
  --vd-ink-62:  rgba(247,245,244,.62);
  --vd-ink-60:  rgba(247,245,244,.60);
  --vd-ink-58:  rgba(247,245,244,.58);
  --vd-ink-55:  rgba(247,245,244,.55);
  --vd-ink-50:  rgba(247,245,244,.50);
  --vd-ink-45:  rgba(247,245,244,.45);
  --vd-ink-42:  rgba(247,245,244,.42);
  --vd-ink-40:  rgba(247,245,244,.40);  /* [relevé] 7x, L1256 */
  --vd-ink-38:  rgba(247,245,244,.38);
  --vd-ink-35:  rgba(247,245,244,.35);  /* [relevé] 5x, L1499 */
  --vd-ink-32:  rgba(247,245,244,.32);

  /* Rouge / orange de marque */
  --vd-red:            #E8202F;
  --vd-red-deep:       #BF1220;
  --vd-red-dark:       #7A0812;
  --vd-red-darkest:    #3E0409;
  --vd-red-mid:        #8E0A14;
  --vd-red-soft:       #5A0810;   /* texte sur fond blanc dans les CTA rouges */
  --vd-orange:         #FF6B35;
  --vd-orange-soft:    #FF8A5B;   /* liens, sur-titres, accents */
  --vd-orange-mid:     #FF9E7A;   /* [relevé] 8x, L765 — chiffres et pastilles d'accent */
  --vd-orange-pale:    #FFAE7A;
  --vd-peach:          #FFC1AE;   /* 2e ligne du titre hero */
  --vd-peach-2:        #FFC9B4;   /* pictos ✓ sur fond rouge */
  --vd-orange-halo:    #E0281F;

  /* Surfaces translucides (cartes, bordures) — valeurs exactes */
  --vd-surface-3:   rgba(255,255,255,.03);
  --vd-surface-28:  rgba(255,255,255,.028);
  --vd-surface-4:   rgba(255,255,255,.04);
  --vd-surface-5:   rgba(255,255,255,.05);
  --vd-line-6:      rgba(255,255,255,.06);
  --vd-line-7:      rgba(255,255,255,.07);
  --vd-line-8:      rgba(255,255,255,.08);
  --vd-line-9:      rgba(255,255,255,.09);
  --vd-line-10:     rgba(255,255,255,.10);  /* [relevé] L1006 — bordure du groupe de filtres */
  --vd-line-11:     rgba(255,255,255,.11);
  --vd-line-12:     rgba(255,255,255,.12);
  --vd-line-13:     rgba(255,255,255,.13);
  --vd-line-14:     rgba(255,255,255,.14);  /* [relevé] 8x, L785 — survol des CTA sur fond rouge */
  --vd-line-16:     rgba(255,255,255,.16);
  --vd-line-20:     rgba(255,255,255,.20);
  --vd-line-22:     rgba(255,255,255,.22);
  --vd-line-45:     rgba(255,255,255,.45);

  /* Teintes rouges translucides — pastilles, encadrés, halos */
  --vd-red-deep-20: rgba(191,18,32,.20);  /* [relevé] L2904 — fond de la tuile d'audience principale */
  --vd-red-deep-22: rgba(191,18,32,.22);  /* [relevé] L2785 — fond de la 1re tuile de service */
  --vd-red-deep-24: rgba(191,18,32,.24);  /* [relevé] L2863 — fond de l'offre mise en avant */
  --vd-red-deep-28: rgba(191,18,32,.28);  /* [relevé] L1602 — fond du bandeau newsletter */
  --vd-red-deep-30: rgba(191,18,32,.30);  /* [relevé] L1996 — encart « clients internationaux » */
  --vd-red-09:  rgba(232,32,47,.09);  /* [relevé] L825 — bandeau de cas sur fiche d'expertise */
  --vd-red-12:  rgba(232,32,47,.12);  /* [relevé] 2x, L765 */
  --vd-red-18:  rgba(232,32,47,.18);  /* [relevé] L876 — badge « le plus demandé » */
  --vd-red-24:  rgba(232,32,47,.24);  /* [relevé] L825 — bordure du bandeau de cas */
  --vd-red-34:  rgba(232,32,47,.34);  /* [relevé] L2864 — bordure de l'offre mise en avant */
  --vd-red-14:  rgba(232,32,47,.14);  /* [relevé] 4x, L1012 */
  --vd-red-16:  rgba(232,32,47,.16);  /* [relevé] 2x, L807 */
  --vd-red-28:  rgba(232,32,47,.28);  /* bordure .vd-frame-red */
  --vd-red-30:  rgba(232,32,47,.30);  /* [relevé] L1012 — bordure des étiquettes de projet */
  --vd-red-55:  rgba(232,32,47,.55);  /* [relevé] L975 — survol du projet vedette */
  --vd-red-35:  rgba(232,32,47,.35);  /* [relevé] L771 — bordure des messages d'erreur */
  --vd-red-40:  rgba(232,32,47,.40);  /* [relevé] L621 — survol des tuiles d'audience */
  --vd-red-60:  rgba(232,32,47,.60);  /* bordure de champ au focus */
  --vd-red-72:  rgba(232,32,47,.72);  /* [relevé] L3103 — 2e jalon de la frise « Notre histoire » */
  --vd-red-92:  rgba(232,32,47,.92);  /* [relevé] L2122 — fond du bouton haut de page */

  /* Textes sur fond rouge */
  --vd-on-red:      #ffffff;
  --vd-on-red-86:   rgba(255,255,255,.86);
  --vd-on-red-84:   rgba(255,255,255,.84);  /* [relevé] 1x, L666 */
  --vd-on-red-82:   rgba(255,255,255,.82);
  --vd-on-red-78:   rgba(255,255,255,.78);
  --vd-on-red-72:   rgba(255,255,255,.72);
  --vd-on-red-70:   rgba(255,255,255,.70);

  /* États */
  --vd-ok:      #4ADE80;
  --vd-ok-bg:   rgba(74,222,128,.08);
  --vd-ok-bg-14: rgba(74,222,128,.14);   /* [relevé] L3158 — badge « Ouvert maintenant » */
  --vd-ok-line: rgba(74,222,128,.30);
  --vd-ok-line-45: rgba(74,222,128,.45);  /* pastille d'état de la page de vérification */
  --vd-red-bg-10:  rgba(232,32,47,.10);
  --vd-red-line-40: rgba(232,32,47,.40);
  --vd-err:     #FCA5A5;   /* [relevé] messages d'erreur de formulaire */

  /* ---------- TYPOGRAPHIE ---------- */
  --vd-font-display: 'Space Grotesk', system-ui, sans-serif;
  --vd-font-body:    Manrope, system-ui, sans-serif;
  --vd-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Échelle de titres — chaque valeur est utilisée telle quelle */
  --vd-h1-hero:  700 76px/1.02 var(--vd-font-display);
  --vd-h1-page:  700 64px/1.04 var(--vd-font-display);
  --vd-h1-train: 700 54px/1.06 var(--vd-font-display);  /* [relevé] L1390 — titre de fiche formation */
  --vd-h1-art:   700 48px/1.08 var(--vd-font-display);
  --vd-h2-xl:    700 52px/1.08 var(--vd-font-display);
  --vd-h2-l:     700 44px/1.08 var(--vd-font-display);
  --vd-h2-m:     700 40px/1.10 var(--vd-font-display);
  --vd-h2-m8:    700 40px/1.08 var(--vd-font-display);  /* [relevé] L732 — titre du devis rapide */
  --vd-h2:       700 38px/1.10 var(--vd-font-display);
  --vd-h2-card:  700 34px/1.14 var(--vd-font-display);
  --vd-h2-s:     700 32px/1.10 var(--vd-font-display);
  --vd-h3-xl:    600 30px/1.15 var(--vd-font-display);
  --vd-h3-26:    600 26px/1.20 var(--vd-font-display);  /* [relevé] L1900 — titre de l'écran de confirmation */
  --vd-h3-l:     600 24px/1.20 var(--vd-font-display);
  --vd-h3-23:    600 23px/1.20 var(--vd-font-display);  /* [relevé] L879 — titre d'offre */
  --vd-h3-l-s:   600 22px/1.20 var(--vd-font-display);  /* [relevé] 3x, L1214 */
  --vd-h3-m:     600 21px/1.20 var(--vd-font-display);
  --vd-h3:       600 20px/1.20 var(--vd-font-display);
  --vd-h3-19:    600 19px/1.25 var(--vd-font-display);  /* [relevé] L1015 — titre de carte projet */
  --vd-h3-18-13: 600 18px/1.3  var(--vd-font-display);  /* [relevé] L1520 — titre de carte article */
  --vd-h2-art:   700 34px/1.15 var(--vd-font-display);  /* [relevé] L1482 — titre de l'article à la une */
  --vd-h2-34:    700 34px/1.10 var(--vd-font-display);  /* [relevé] L2028 — titres du bloc de contact direct */
  --vd-faq-q-l:  600 16.5px/1.35 var(--vd-font-display); /* [relevé] L2047 — question d'accordéon encadré */
  --vd-sign-l:   400 22px/1    var(--vd-font-display);  /* [relevé] L2048 — signe d'accordéon encadré */
  --vd-h4-16-13: 600 16px/1.30 var(--vd-font-body);     /* [relevé] L2036 — valeur de canal direct */
  --vd-h3-s:     600 18px/1.25 var(--vd-font-display);
  --vd-h3-s-d:   600 18px/1.20 var(--vd-font-display);  /* [relevé] 3x, L842 */
  --vd-h4:       600 17px/1.30 var(--vd-font-display);
  --vd-h4-job:   600 17px/1.30 var(--vd-font-display);  /* [relevé] L1822 — intitulé de poste */
  --vd-h4-s:     600 16px/1.20 var(--vd-font-display);  /* [relevé] 3x, L1919 */
  --vd-h4-a:     600 16px/1.25 var(--vd-font-display);  /* [relevé] L1592 — nom d'auteur */
  --vd-stat:     700 40px/1    var(--vd-font-display);
  --vd-price:    600 20px/1    var(--vd-font-display);  /* [relevé] L1228 — prix de formation */
  --vd-stat-l:   700 36px/1    var(--vd-font-display);  /* [relevé] L965 — chiffres de preuve */
  --vd-stat-20:  700 20px/1    var(--vd-font-display);  /* [relevé] L826 — métrique du bandeau de cas */
  --vd-stat-m:   700 28px/1    var(--vd-font-display);  /* [relevé] 3x, L673 */
  --vd-stat-s:   700 26px/1    var(--vd-font-display);
  --vd-stat-s6:  600 26px/1    var(--vd-font-display);  /* [relevé] 3x, L688 */
  --vd-stat-xs:  700 22px/1    var(--vd-font-display);
  --vd-sign:     400 20px/1    var(--vd-font-display);  /* [relevé] 3x, L714 — signe +/× des accordéons */
  --vd-logo:     600 22px/1    var(--vd-font-display);  /* [relevé] L538 — bandeau de logos technos */
  --vd-faq-q:    600 17px/1.4  var(--vd-font-display);  /* [relevé] L713 — question d'accordéon */
  --vd-cta-h2:   700 60px/1.06 var(--vd-font-display);  /* [relevé] L781 — titre du CTA de l'accueil */
  --vd-cta-h2-s: 700 46px/1.08 var(--vd-font-display);  /* [relevé] L1450 — titre du CTA compact */

  /* Corps de texte */
  --vd-body-xl:        400 18.5px/1.65 var(--vd-font-body);
  --vd-body-xl-s:      400 17.5px/1.65 var(--vd-font-body);  /* [relevé] 5x, L943 — chapô des CTA */
  --vd-lede-cta:       400 18px/1.65   var(--vd-font-body);  /* [relevé] L783 — chapô du CTA de l'accueil */
  --vd-lede-hero:      400 18px/1.60   var(--vd-font-body);  /* [relevé] L528 — chapô du hero */
  --vd-body-l:         400 18px/1.70   var(--vd-font-body);
  --vd-body-m:         400 16.5px/1.60 var(--vd-font-body);
  --vd-body-m-17:      400 16px/1.70   var(--vd-font-body);  /* [relevé] L1483 — chapô de l'article à la une */
  --vd-body-m-loose:   400 16px/1.75   var(--vd-font-body);  /* [relevé] 4x, L1106 */
  --vd-body-m-165:     400 16px/1.65   var(--vd-font-body);  /* [relevé] L706 — chapô d'accroche FAQ */
  --vd-item-title:     500 16.5px/1.4  var(--vd-font-body);  /* [relevé] L1046 — ligne de frise */
  --vd-body-xs-17:     400 14.5px/1.70 var(--vd-font-body);  /* [relevé] L1075 — note de bas de section */
  --vd-nav-13-14:      500 13px/1.4    var(--vd-font-body);  /* [relevé] L1069 — libellé de projet lié */
  --vd-body:           400 16px/1.60   var(--vd-font-body);
  --vd-body-s-loose:   400 15.5px/1.70 var(--vd-font-body);  /* [relevé] 10x, L689 */
  --vd-body-s:         400 15.5px/1.60 var(--vd-font-body);
  --vd-body-15-17:     400 15px/1.70   var(--vd-font-body);  /* [relevé] L718 — réponse d'accordéon */
  --vd-body-15-165:    400 15px/1.65   var(--vd-font-body);  /* [relevé] L666 — étapes de l'étude de cas */
  --vd-body-15:        400 15px/1.60   var(--vd-font-body);  /* [relevé] 3x, L763 */
  --vd-body-15-flat:   400 15px/1      var(--vd-font-body);  /* [relevé] 8x, L756 */
  --vd-body-xs-loose:  400 14.5px/1.65 var(--vd-font-body);  /* [relevé] 11x, L625 */
  --vd-body-xs:        400 14.5px/1.60 var(--vd-font-body);
  --vd-body-xs-tight:  400 14.5px/1.50 var(--vd-font-body);  /* [relevé] 3x, L734 */
  --vd-body-115:       400 11.5px/1     var(--vd-font-body);  /* [relevé] L1228 — « par participant » */
  --vd-body-3xs-16:    400 13.5px/1.60 var(--vd-font-body);  /* [relevé] L1249 — texte d'étape d'inscription */
  --vd-nav-15-15:      500 15px/1.50   var(--vd-font-body);  /* [relevé] L1258 — valeur de modalité */
  --vd-body-2xs-165:   400 14px/1.65   var(--vd-font-body);  /* [relevé] L2085 — baseline du pied de page */
  --vd-body-2xs:       400 14px/1.60   var(--vd-font-body);
  --vd-body-2xs-15:    400 14px/1.50   var(--vd-font-body);  /* [relevé] L2107 — colonne contact du pied */
  --vd-body-2xs-flat:  400 14px/1      var(--vd-font-body);  /* [relevé] 4x, L1492 */
  --vd-body-3xs:       400 13.5px/1.60 var(--vd-font-body);
  --vd-body-3xs-t:     400 13.5px/1.50 var(--vd-font-body);  /* [relevé] 3x, L605 */
  --vd-body-3xs-xt:    400 13.5px/1.40 var(--vd-font-body);  /* [relevé] 5x, L564 */
  --vd-body-135-145:   400 13.5px/1.45 var(--vd-font-body);  /* [relevé] L827 — libellé du bandeau de cas */
  --vd-body-xs-155:    400 14.5px/1.55 var(--vd-font-body);  /* [relevé] L1814 — avantages du recrutement */
  --vd-body-xs-15:     400 14.5px/1.50 var(--vd-font-body);  /* [relevé] L1977 — lignes de l'encart « En direct » */
  --vd-body-15-15:     500 15px/1.50   var(--vd-font-body);  /* [relevé] L1848 — valeur d'identité */
  --vd-body-2xs-17:    400 14px/1.70   var(--vd-font-body);  /* [relevé] L1852 — note d'identité */
  --vd-body-13-14:     400 13px/1.40   var(--vd-font-body);  /* [relevé] L1823 — méta de poste */
  --vd-body-13:        400 13px/1.45   var(--vd-font-body);  /* [relevé] 3x, L674 */
  --vd-body-13-flat:   400 13px/1      var(--vd-font-body);  /* [relevé] L2116 — mentions légales du pied */
  --vd-body-12:        400 12.5px/1.30 var(--vd-font-body);  /* [relevé] 5x, L694 */
  --vd-body-12-flat4:  400 12.5px/1     var(--vd-font-body);  /* [relevé] L1524 — pied de carte article */
  --vd-body-12-14:     400 12.5px/1.4   var(--vd-font-body);  /* [relevé] L1593 — rôle d'auteur */
  --vd-field-bg-40:    rgba(0,0,0,.40);
  --vd-body-12-flat:   500 12px/1      var(--vd-font-body);  /* [relevé] L752 — sélecteur de besoin */
  --vd-err-msg:        500 13.5px/1.5  var(--vd-font-body);  /* [relevé] L771 — message d'erreur */
  --vd-close:          400 24px/1      var(--vd-font-body);  /* [spec] croix du tiroir mobile */

  /* Mono (sur-titres, métadonnées) */
  --vd-mono:     500 12px/1    var(--vd-font-mono);
  --vd-mono-lh:  500 12px/1.1  var(--vd-font-mono);  /* [relevé] 3x, L1917 */
  --vd-mono-s:   500 11.5px/1  var(--vd-font-mono);
  --vd-mono-xs:  500 11px/1    var(--vd-font-mono);  /* [relevé] 4x, L1012 */
  --vd-mono-125b:500 12px/1.25 var(--vd-font-mono);  /* [relevé] L905 — puce de stack */
  --vd-mono-135: 500 13px/1.35 var(--vd-font-mono);  /* [relevé] L1018 — métrique de carte projet */
  --vd-mono-125: 500 12.5px/1  var(--vd-font-mono);  /* [relevé] L1294 — rôle de formateur */
  --vd-mono-15:  500 12px/1.5  var(--vd-font-mono);  /* [relevé] L1422 — jour du programme */
  --vd-mono-m:   500 13px/1    var(--vd-font-mono);
  --vd-mono-ui:  600 14px/1    var(--vd-font-mono);   /* [relevé] L743 — badge « DEMANDE ENVOYÉE » */

  /* Interface */
  --vd-ui:       600 14px/1    var(--vd-font-body);
  --vd-ui-l:     600 15px/1    var(--vd-font-body);
  --vd-ui-xl:    600 16px/1    var(--vd-font-body);
  --vd-ui-17:    600 17px/1    var(--vd-font-body);   /* [relevé] L2122 — flèche du bouton haut de page */
  --vd-ui-16-12: 600 16px/1.2  var(--vd-font-body);   /* [relevé] L1189 — onglet de public */
  --vd-ui-13:    600 13px/1    var(--vd-font-body);   /* [relevé] L1198 — pilule de niveau */
  --vd-ui-125:   600 12.5px/1  var(--vd-font-body);   /* [relevé] L1503 — bouton de tri */
  --vd-ui-12:    600 12px/1    var(--vd-font-body);   /* [relevé] L1992 — pastille « ouvert maintenant » */
  --vd-ui-11:    600 11px/1    var(--vd-font-body);   /* [relevé] L1211 — badge « populaire » */
  --vd-ui-m:     600 14.5px/1  var(--vd-font-body);   /* [relevé] 3x, L595 */
  --vd-ui-m-lh:  600 14.5px/1.2 var(--vd-font-body);  /* [relevé] 5x, L693 */
  --vd-ui-s:     600 13.5px/1  var(--vd-font-body);   /* [relevé] 3x, L608 */
  --vd-ui-xs:    600 13px/1    var(--vd-font-body);   /* [relevé] 6x, L1197 */
  --vd-nav:      500 14px/1    var(--vd-font-body);
  --vd-nav-m:    500 14.5px/1  var(--vd-font-body);   /* [relevé] L790 — bandeau contact du CTA */
  --vd-nav-l:    500 15px/1    var(--vd-font-body);   /* [relevé] 3x, L525 */
  --vd-nav-s:    500 13.5px/1  var(--vd-font-body);   /* [relevé] 10x, L626 */
  --vd-nav-xs:   500 13px/1    var(--vd-font-body);   /* [relevé] 5x, L828 */

  /* Interlettrage */
  --vd-track-hero: -.035em;
  --vd-track-art:  -.034em;   /* [relevé] 1x, L1390 */
  --vd-track-art2: -.032em;   /* [relevé] 2x, L1088 */
  --vd-track-h2:   -.030em;
  --vd-track-h2s:  -.025em;
  --vd-track-h3:   -.020em;
  --vd-track-mono:  .060em;
  --vd-track-caps:  .080em;

  /* ---------- RAYONS ---------- */
  --vd-r-6: 6px;   --vd-r-7: 7px;   --vd-r-8: 8px;    --vd-r-9: 9px;
  --vd-r-10: 10px; --vd-r-11: 11px; --vd-r-12: 12px;  --vd-r-14: 14px;
  --vd-r-16: 16px; --vd-r-18: 18px; --vd-r-20: 20px;  --vd-r-22: 22px;
  --vd-r-pill: 999px;
  --vd-r-circle: 50%;   /* [relevé] 22x, L521 — halos, pastilles, portraits */
  /* --vd-r-7 : [relevé] 9x, L1084 — petites pastilles de chiffre */

  /* ---------- ESPACEMENT ---------- */
  --vd-gutter:      44px;   /* marge latérale des sections (desktop) */
  --vd-gutter-md:   24px;   /* ≤900px */
  --vd-gutter-sm:   18px;   /* ≤560px */
  --vd-max:       1300px;   /* largeur de contenu standard */
  --vd-max-logos: 1100px;
  --vd-max-doc:   1000px;
  --vd-max-cta:    900px;
  --vd-max-cta-l: 1000px;   /* [relevé] L777 — le CTA de l'accueil est plus large */
  --vd-gap:         18px;   /* gap de grille standard */

  /* ---------- OMBRES ---------- */
  --vd-shadow-header:  0 12px 34px rgba(0,0,0,.42);
  --vd-shadow-cta:     0 8px 24px rgba(247,245,244,.18);
  --vd-shadow-cta-lg:  0 16px 40px rgba(0,0,0,.35);
  --vd-shadow-red:     0 12px 30px rgba(232,32,47,.35);  /* [relevé] 3x, L768 */
  --vd-shadow-float:   0 12px 30px rgba(0,0,0,.4);       /* [relevé] 1x, L2122 — bouton haut de page */
  --vd-shadow-halo:    0 0 240px 70px rgba(224,40,31,.26);
  --vd-shadow-bar:     0 0 12px rgba(232,32,47,.6);

  /* ---------- MOUVEMENT ---------- */
  --vd-ease:       cubic-bezier(.22,1,.36,1);
  --vd-t-fast:     .16s ease;
  --vd-t-med:      .18s ease;
  --vd-t-slow:     .28s var(--vd-ease);
  --vd-t-fade:     .28s ease;             /* [relevé] L716 — fondu du panneau d'accordéon */
  --vd-t-acc:      .32s var(--vd-ease);   /* [relevé] 4x, L714 — rotation du signe d'accordéon */
  --vd-t-panel:    .36s var(--vd-ease);   /* [relevé] 4x, L716 — ouverture du panneau d'accordéon */
  --vd-t-reveal:   .7s  var(--vd-ease);
  --vd-t-zoom:     .6s  var(--vd-ease);

  /* ---------- POINTS DE RUPTURE (documentation) ---------- */
  /* Aucune media query n'existe dans les maquettes : ces seuils sont
     définis par VISIODEV.md §2.16, pas relevés. Voir .ai/rules.
     1180px : grilles 5–6 colonnes → 3
     1024px : grilles 3–6 colonnes → 2 ; splits 2 colonnes → 1
      900px : bascule menu mobile ; gouttières 24px ; titres réduits
      760px : toutes grilles → 1 colonne (sauf bandeaux de stats → 2)
      560px : gouttières 18px ; titres minimaux                        */
}

/* ============================================================
   BACKOFFICE — thème clair (défaut)
   Vérifié identique au caractère près à la maquette décodée L476-489.
   ============================================================ */
body {
  --bo-bg: #F4F1F0;      --bo-card: #ffffff;     --bo-subtle: #FAF8F7;   --bo-subtle2: #FBFAF9;
  --bo-border: #E6E1DE;  --bo-line: #EFEBE9;     --bo-divider: #F4F1EF;
  --bo-input: #E0DAD6;   --bo-border2: #D9D3CF;
  --bo-ink: #14100F;     --bo-text: #3B3532;     --bo-muted: #6E6663;    --bo-faint: #C9C1BC;
  --bo-chipbg: #F0EDEB;  --bo-chipbg2: #EEEAE8;  --bo-stripe: #EDE9E7;
  --bo-okbg: #DCFCE7;    --bo-okfg: #15803D;
  --bo-warnbg: #FEF3C7;  --bo-warnfg: #92400E;
  --bo-errbg: #FEF2F2;   --bo-errfg: #B91C1C;    --bo-errsoft: #FEF1F2;
  --bo-infobg: #E0F2FE;  --bo-infofg: #075985;
  --bo-purpbg: #F3E8FF;  --bo-purpfg: #6B21A8;
  --bo-noticebg: #FFFBEB; --bo-noticeborder: #FDE68A; --bo-noticefg: #78350F;
  --bo-danger: #B91C1C;  --bo-dangerborder: #F3D2D2; --bo-errorborder: #FCA5A5;
  --bo-dangerbtn: #B91C1C; --bo-dangerbtnhover: #991B1B;
  --bo-amber: #B45309;   --bo-link: #BF1220;     --bo-linkhover: #E8202F;
  --bo-toastbg: #14100F; --bo-toastfg: #F7F5F4;
}

/* ============================================================
   BACKOFFICE — thème sombre
   Vérifié identique au caractère près à la maquette décodée L493-506.
   ============================================================ */
body[data-bo-theme="dark"] {
  --bo-bg: #0E0C10;      --bo-card: #17141A;     --bo-subtle: #1E1A21;   --bo-subtle2: #131017;
  --bo-border: #2C2731;  --bo-line: #262129;     --bo-divider: #221D28;
  --bo-input: #332C39;   --bo-border2: #3D3543;
  --bo-ink: #F5F2F4;     --bo-text: #CFC7CE;     --bo-muted: #9C939E;    --bo-faint: #5B535F;
  --bo-chipbg: #241F29;  --bo-chipbg2: #201B25;  --bo-stripe: #221D28;
  --bo-okbg: #10321F;    --bo-okfg: #6EE7A0;
  --bo-warnbg: #3A2A0B;  --bo-warnfg: #FBBF24;
  --bo-errbg: #3A1418;   --bo-errfg: #FCA5A5;    --bo-errsoft: #331215;
  --bo-infobg: #0C2A3D;  --bo-infofg: #7DD3FC;
  --bo-purpbg: #2A1740;  --bo-purpfg: #D8B4FE;
  --bo-noticebg: #2A2109; --bo-noticeborder: #5E4A13; --bo-noticefg: #FCD34D;
  --bo-danger: #F87171;  --bo-dangerborder: #5A2226; --bo-errorborder: #A85A5A;
  --bo-dangerbtn: #DC2626; --bo-dangerbtnhover: #B91C1C;
  --bo-amber: #FBBF24;   --bo-link: #FF8A5B;     --bo-linkhover: #FFA97C;
  --bo-toastbg: #2A242E; --bo-toastfg: #F5F2F4;
  /* Le voile se densifie en sombre : sur un fond déjà noir, .45 ne détache
     plus la modale de la page qu'elle recouvre. */
  --bo-modal-veil: rgba(0,0,0,.62);
}

/* ============================================================
   BACKOFFICE — couleurs de marque, insensibles au thème
   La barre latérale et l'écran de connexion ne suivent PAS le thème :
   la maquette les garde sombres dans les deux modes (décodé L549, L522).
   Ces valeurs sont absentes de VISIODEV.md §1.
   ============================================================ */
body {
  --bo-brand:        #E8202F;   /* [relevé] 27x — bouton principal, rail actif, pastille */
  --bo-brand-hover:  #C81525;   /* [relevé] 15x — survol du bouton principal */
  --bo-on-brand:     #ffffff;   /* [relevé] 23x */
  --bo-shell:        #0A0509;   /* [relevé] fond de la barre latérale, jamais thémé */
  --bo-shell-ink:    #F7F5F4;   /* [relevé] texte actif de la barre latérale */
  --bo-login-halo:   #2A040A;   /* [relevé] départ du dégradé radial de connexion */
  --bo-avatar:       #BF1220;   /* [relevé] pastille d'initiales */
  --bo-publish:      #15803D;   /* [relevé] bouton « Publier » */
  --bo-publish-hover:#116631;
  /* Vert officiel de WhatsApp. Déclaré une seule fois, sans contrepartie dans
     `[data-bo-theme="dark"]` : c'est une couleur de marque tierce, pas une
     couleur d'interface. La faire varier avec le thème la rendrait
     méconnaissable et ne respecterait plus la charte du service. */
  --bo-whatsapp:     #25D366;
}

/* ============================================================
   BACKOFFICE — typographie, rayons, divers
   Les familles sont celles du site ; seules les tailles changent.
   Relevés de l'écran de connexion (décodé L509-543). Le reste des
   échelles arrive avec les 13 écrans (phase 9).
   ============================================================ */
body {
  --bo-h1:      700 22px/1.20  var(--vd-font-display);  /* [relevé] L529 — titre de l'écran de connexion */
  --bo-body:    400 14px/1.55  var(--vd-font-body);     /* [relevé] L530 — chapô */
  --bo-field:   400 14px/1.40  var(--vd-font-body);     /* [relevé] L532 — champ de saisie */
  --bo-label:   600 11px/1     var(--vd-font-mono);     /* [relevé] L531 — étiquette de champ */
  --bo-tag:     500 11px/1     var(--vd-font-mono);     /* [relevé] L526 — mention « ADMIN » */
  --bo-btn:     600 14.5px/1   var(--vd-font-body);     /* [relevé] L538 — bouton principal */
  --bo-alert:   500 13px/1.45  var(--vd-font-body);     /* [relevé] L536 — message d'erreur */
  --bo-note:    400 12.5px/1.60 var(--vd-font-body);    /* [relevé] L539 — note de bas de carte */

  --bo-r-8: 8px;  --bo-r-9: 9px;  --bo-r-10: 10px;  --bo-r-16: 16px;

  --bo-track-h1:    -.02em;   /* [relevé] L529 */
  --bo-track-label:  .07em;   /* [relevé] L531 */
  --bo-track-tag:    .10em;   /* [relevé] L526 */

  --bo-focus:        rgba(232,32,47,.35);   /* [relevé] L516 — contour de champ au focus */
  --bo-card-shadow:  0 30px 70px rgba(0,0,0,.45);  /* [relevé] L528 */
  --bo-tag-ink:      rgba(247,245,244,.40); /* [relevé] L526 */
  --bo-tag-line:     rgba(255,255,255,.16); /* [relevé] L526 */
  --bo-shell-line:   rgba(255,255,255,.07); /* [relevé] L549 — filets de la barre latérale */
  --bo-t-fast: .14s ease;   /* [relevé] L558 */
}

/* ============================================================
   BACKOFFICE — coquille et écrans (phase 9)
   Relevés de la maquette décodée L545-705. La barre latérale reste
   sombre dans les deux thèmes : ses encres sont des rgba() figées,
   pas des tokens thémés.
   ============================================================ */
body {
  /* ---------- GÉOMÉTRIE DE LA COQUILLE ---------- */
  --bo-sidebar-w:   230px;   /* [relevé] L548 — §9.3 dit 264px, la maquette prime */
  --bo-pad-main:    26px;    /* [relevé] L638 */
  --bo-pad-topbar:  14px 26px; /* [relevé] L582 */
  --bo-search-w:    290px;   /* [relevé] L587 */
  --bo-notif-w:     392px;   /* [relevé] L598 */
  --bo-ctrl-h:      40px;    /* [relevé] L587, L589, L631 — hauteur des commandes de la barre */

  /* ---------- ENCRES DE LA BARRE LATÉRALE ---------- */
  --bo-nav-ink:       rgba(247,245,244,.62); /* [relevé] L2077 — élément inactif */
  --bo-nav-ink-on:    #F7F5F4;               /* [relevé] L2077 — élément actif */
  --bo-nav-bg-on:     rgba(255,255,255,.08); /* [relevé] L2078 */
  --bo-nav-bg-hover:  rgba(255,255,255,.06); /* [relevé] L558 */
  --bo-nav-group:     rgba(247,245,244,.30); /* [relevé] L556 — intitulé de groupe */
  --bo-nav-tag:       rgba(247,245,244,.38); /* [relevé] L551 — mention « ADMIN » */
  --bo-nav-badge-bg:  rgba(255,255,255,.10); /* [relevé] L2081 */
  --bo-nav-badge-fg:  rgba(247,245,244,.70); /* [relevé] L2082 */
  --bo-nav-meta:      rgba(247,245,244,.40); /* [relevé] L574 — rôle sous le nom */
  --bo-nav-btn-line:  rgba(255,255,255,.14); /* [relevé] L577 — bouton de déconnexion */
  --bo-nav-btn-line-on: rgba(255,255,255,.30); /* [relevé] L577 — au survol */

  /* ---------- TYPOGRAPHIE DE LA COQUILLE ---------- */
  --bo-nav-tagf:    500 9.5px/1    var(--vd-font-mono);  /* [relevé] L551 */
  --bo-nav-groupf:  600 9.5px/1    var(--vd-font-mono);  /* [relevé] L556 */
  --bo-nav-item:    500 13.5px/1.2 var(--vd-font-body);  /* [relevé] L560 */
  --bo-nav-badge:   600 10.5px/1.5 var(--vd-font-mono);  /* [relevé] L562 */
  --bo-nav-name:    600 12.5px/1.3 var(--vd-font-body);  /* [relevé] L573 */
  --bo-nav-role:    400 10.5px/1.3 var(--vd-font-mono);  /* [relevé] L574 */
  --bo-nav-logout:  500 12px/1     var(--vd-font-body);  /* [relevé] L577 */
  --bo-avatar-f:    600 12px/1     var(--vd-font-mono);  /* [relevé] L571 */

  --bo-crumb:       500 10.5px/1   var(--vd-font-mono);  /* [relevé] L584 */
  --bo-screen:      700 17px/1.2   var(--vd-font-display); /* [relevé] L585 */
  --bo-search:      400 13px/1.4   var(--vd-font-body);  /* [relevé] L587 */
  --bo-ctrl:        600 13px/1     var(--vd-font-body);  /* [relevé] L631, L635 */
  --bo-count:       600 10.5px/18px var(--vd-font-mono); /* [relevé] L592 — pastille de notification */

  --bo-panel-h2:    700 14.5px/1.2 var(--vd-font-display); /* [relevé] L657 */
  --bo-panel-link:  600 12.5px/1   var(--vd-font-body);  /* [relevé] L658 */
  --bo-stat-label:  500 10.5px/1   var(--vd-font-mono);  /* [relevé] L645 */
  --bo-stat-value:  700 30px/1     var(--vd-font-display); /* [relevé] L647 */
  --bo-stat-unit:   400 12.5px/1.3 var(--vd-font-body);  /* [relevé] L648 */
  --bo-row:         500 13.5px/1.4 var(--vd-font-body);  /* [relevé] L664 */
  --bo-row-meta:    400 11.5px/1   var(--vd-font-mono);  /* [relevé] L665 */
  --bo-row-date:    600 11.5px/1.3 var(--vd-font-mono);  /* [relevé] L684 */
  --bo-log:         400 13px/1.45  var(--vd-font-body);  /* [relevé] L700 */
  --bo-log-ini:     600 9.5px/1    var(--vd-font-mono);  /* [relevé] L699 */
  --bo-kind:        600 9.5px/1.5  var(--vd-font-mono);  /* [relevé] L663, L611 */
  --bo-empty-t:     600 13.5px/1.4 var(--vd-font-body);  /* [relevé] L671 */
  --bo-empty-p:     400 13px/1.5   var(--vd-font-body);  /* [relevé] L672 */
  --bo-notice:      400 13.5px/1.6 var(--vd-font-body);  /* [relevé] L711 */
  --bo-notif-name:  700 13px/1.35  var(--vd-font-body);  /* [relevé] L2205 — demande non lue */
  --bo-notif-read:  500 13px/1.35  var(--vd-font-body);  /* [relevé] L2205 — demande lue */
  --bo-notif-sub:   400 12px/1.45  var(--vd-font-body);  /* [relevé] L615 */
  --bo-notif-when:  400 10.5px/1   var(--vd-font-mono);  /* [relevé] L612 */

  /* ---------- RAYONS ET FILETS ---------- */
  --bo-r-2: 2px;   /* [relevé] L559 — rail de l'élément actif */
  --bo-r-5: 5px;   /* [relevé] L611, L663 — pastille de type */
  --bo-r-11: 11px; /* [relevé] L1466 — toast */
  --bo-r-12: 12px; /* [relevé] L598, L644 — cartes et menu déroulant */
  --bo-r-20: 20px; /* [relevé] L562 — pastille de comptage */
  --bo-rail-w: 3px;  --bo-rail-h: 15px;  /* [relevé] L559 */

  /* ---------- INTERLIGNAGES ---------- */
  --bo-track-crumb: .09em;  /* [relevé] L584 */
  --bo-track-stat:  .08em;  /* [relevé] L645 */
  --bo-track-nav:   .12em;  /* [relevé] L551, L556 */
  --bo-track-kind:  .05em;  /* [relevé] L663 */
  --bo-track-type:  .04em;  /* [relevé] L611 */

  /* ---------- OMBRES ET MOUVEMENT ---------- */
  --bo-modal-veil:   rgba(0,0,0,.45);  /* [spec] voile de la modale partagée, absent de la maquette */
  --bo-menu-shadow:  0 24px 60px rgba(0,0,0,.28); /* [relevé] L598 */
  --bo-toast-shadow: 0 18px 44px rgba(0,0,0,.32); /* [relevé] L1466 */
  --bo-toast-f:     500 13.5px/1.45 var(--vd-font-body); /* [relevé] L1468 */
  --bo-t-toast: .22s ease; /* [relevé] L1466 */
  --bo-t-card: .15s ease;  /* [relevé] L644 — survol des cartes de chiffres */
  --bo-t-menu: .16s ease;  /* [relevé] L598 — apparition du menu déroulant */
  --bo-t-main: .28s ease;  /* [relevé] L638 — apparition du contenu */
  --bo-t-drawer: .24s var(--vd-ease); /* [spec] §9.4 — tiroir mobile, absent de la maquette */
}

/* ============================================================
   BACKOFFICE — listes de contenus et éditeur de fiche (écrans 4 à 7)
   Relevés du décodé L747-938.
   ============================================================ */
body {
  /* ---------- TYPOGRAPHIE ---------- */
  --bo-chip-f:    600 12.5px/1   var(--vd-font-body);  /* [relevé] L750 — pastille de filtre */
  --bo-cta:       600 13.5px/1   var(--vd-font-body);  /* [relevé] L753 — bouton « Nouveau » */
  --bo-th:        600 10.5px/1   var(--vd-font-mono);  /* [relevé] L763 — en-tête de colonne */
  --bo-td-title:  600 13.5px/1.4 var(--vd-font-body);  /* [relevé] L772 */
  --bo-td-sub:    400 11.5px/1.4 var(--vd-font-mono);  /* [relevé] L773 */
  --bo-td:        400 13px/1.4   var(--vd-font-body);  /* [relevé] L778 */
  --bo-td-mono:   400 12px/1.4   var(--vd-font-mono);  /* [relevé] L780 */
  --bo-tag-f:     600 10px/1.6   var(--vd-font-mono);  /* [relevé] L776 — pastille d'état */
  --bo-mini:      600 12px/1.3   var(--vd-font-body);  /* [relevé] L782 — bouton de ligne */
  --bo-foot:      400 12.5px/1   var(--vd-font-body);  /* [relevé] L791 — pied de tableau */
  --bo-blank-t:   700 17px/1.3   var(--vd-font-display); /* [relevé] L798 */
  --bo-blank-p:   400 13.5px/1.6 var(--vd-font-body);  /* [relevé] L799 */

  --bo-title-in:  600 15px/1.4   var(--vd-font-body);  /* [relevé] L811 — champ « Titre » */
  --bo-area:      400 14px/1.6   var(--vd-font-body);  /* [relevé] L823 — chapô */
  --bo-fielderr:  500 12.5px/1.4 var(--vd-font-body);  /* [relevé] L813 */
  --bo-fieldfoot: 400 11.5px/1   var(--vd-font-mono);  /* [relevé] L815 */
  --bo-rte-f:     400 15px/1.7   var(--vd-font-body);  /* [relevé] L838 — corps riche */
  --bo-cardtitle: 700 15px/1.2   var(--vd-font-display); /* [relevé] L845 */
  --bo-day-label: 600 11.5px/1.3 var(--vd-font-mono);  /* [relevé] L851 */
  --bo-day-text:  400 13.5px/1.55 var(--vd-font-body); /* [relevé] L852 */
  --bo-figure:    700 17px/1.2   var(--vd-font-display); /* [relevé] L869 */
  --bo-caption:   400 12.5px/1.3 var(--vd-font-body);  /* [relevé] L870 */
  --bo-act-f:     600 13.5px/1   var(--vd-font-body);  /* [relevé] L885 */
  --bo-act-sm:    600 12.5px/1   var(--vd-font-body);  /* [relevé] L891 */
  --bo-cardnote:  400 12px/1.55  var(--vd-font-body);  /* [relevé] L895 */
  --bo-drop-name: 600 13px/1.4   var(--vd-font-body);  /* [relevé] L901 */
  --bo-drop-meta: 400 11.5px/1.4 var(--vd-font-mono);  /* [relevé] L902 */
  --bo-sublabel:  500 12px/1     var(--vd-font-body);  /* [relevé] L931 */
  --bo-input-f:   400 13.5px/1.4 var(--vd-font-body);  /* [relevé] L908, L923 */
  --bo-input-sm:  400 13px/1.4   var(--vd-font-body);  /* [relevé] L932 */
  --bo-hint:      400 13px/1.5   var(--vd-font-body);  /* [relevé] L858 */

  /* ---------- ÉCRAN 11 — DOCUMENTS ÉMIS — décodé L1128-1262 ---------- */
  --bo-doc-num:     600 13.5px/1.3 var(--vd-font-mono);  /* [relevé] L1240 */
  --bo-doc-kind:    400 11.5px/1.4 var(--vd-font-mono);  /* [relevé] L1241 */
  --bo-doc-name:    600 14px/1.35  var(--vd-font-body);  /* [relevé] L1244 */
  --bo-doc-subject: 400 12.5px/1.45 var(--vd-font-body); /* [relevé] L1245 */
  --bo-doc-detail:  400 11.5px/1.45 var(--vd-font-body); /* [relevé] L1246 */
  --bo-doc-when:    400 11.5px/1.4 var(--vd-font-mono);  /* [relevé] L1250 */
  --bo-doc-prefix:  500 10.5px/1   var(--vd-font-mono);  /* [relevé] L1139 */
  --bo-doc-title:   700 15px/1.25  var(--vd-font-display); /* [relevé] L1140 */
  --bo-doc-hint:    400 12.5px/1.45 var(--vd-font-body); /* [relevé] L1141 */
  --bo-doc-apercu:  400 12.5px/1.5 var(--vd-font-mono);  /* [relevé] L1150 */
  --bo-doc-recapk:  500 10.5px/1.4 var(--vd-font-mono);  /* [relevé] L1196 */
  --bo-doc-recapv:  600 13px/1.4   var(--vd-font-body);  /* [relevé] L1197 */
  --bo-doc-model:   500 10.5px/1   var(--vd-font-mono);  /* [relevé] L1190 */
  --bo-track-doc:   .09em;   /* [relevé] L1190 — étiquette « MODÈLE 1a » */
  --bo-track-num:   .04em;   /* [relevé] L1240 — numéro de document */
  --bo-doccard-min: 230px;   /* [relevé] L1137 */

  /* ---------- GÉOMÉTRIE ---------- */
  --bo-r-6: 6px;   /* [relevé] L833 — bouton de la barre d'édition */
  --bo-r-7: 7px;   /* [relevé] L782 — bouton de ligne */
  --bo-table-min: 880px;  /* [relevé] L759 — largeur minimale avant défilement */
  --bo-side-w:    330px;  /* [relevé] L878 — colonne de réglages */
  --bo-side-min:  280px;  /* [relevé] L878 */
  --bo-main-min:  440px;  /* [relevé] L808 — colonne de contenu */
  --bo-rte-min:   280px;  /* [relevé] L838 */

  --bo-t-row: .12s ease;  /* [relevé] L770 — survol de ligne */
}

/* ============================================================
   BACKOFFICE — file de relecture et boîte de réception (écrans 2 et 3)
   Relevés du décodé L709-742 et L1020-1084.
   ============================================================ */
body {
  /* ---------- FILE DE RELECTURE ---------- */
  --bo-rev-title: 700 16px/1.3   var(--vd-font-display); /* [relevé] L722 */
  --bo-rev-lede:  400 13.5px/1.55 var(--vd-font-body);   /* [relevé] L723 */
  --bo-rev-meta:  400 11.5px/1   var(--vd-font-mono);    /* [relevé] L720 */
  --bo-rev-quote: 400 12.5px/1.55 var(--vd-font-body);   /* [relevé] L725 */
  --bo-rev-btn:   600 13px/1     var(--vd-font-body);    /* [relevé] L729 */
  --bo-rev-min:   240px;   /* [relevé] L717 — colonne de texte */
  --bo-rev-thumb:  88px;   /* [conception] vignette de couverture, hors maquette */
  /* `--bo-rev-side: 190px` (relevé L728) a été retiré avec la colonne de boutons :
     les gestes tiennent désormais sur une rangée en pied de carte. */

  /* ---------- BOÎTE DE RÉCEPTION ---------- */
  /* La liste de la maquette (une pile de cartes en colonne de 320px, filet de
     suivi à gauche) a été remplacée par le tableau dense des autres écrans de
     liste : mêmes pastilles, même `bo-table`, même pied. Les cinq tokens qui ne
     servaient qu'à cette pile — `--bo-inbox-min`, `--bo-msg-name/when/sub`,
     `--bo-rail-inbox` — sont partis avec elle, comme `--bo-empty-lg` (le titre
     d'état vide est celui de `.bo-blank`, partagé avec les autres listes). */
  /* `--bo-chip-sm` (relevé L1024) est parti avec le second rang de pastilles :
     type et suivi partagent une seule barre, donc une seule taille. */
  --bo-table-min-i: 980px; /* [conception] sept colonnes avant défilement */
  /* La maquette ne distingue pas une demande non lue dans la liste — elle ne
     le fait que dans le menu des notifications (L2205). La graisse reprend
     celle du non-lu de ce menu : deux composants qui disent la même chose ne
     doivent pas la dire de deux façons. */
  --bo-inbox-unread: 700 13.5px/1.3 var(--vd-font-body);
  --bo-det-title: 700 20px/1.25  var(--vd-font-display); /* [relevé] L1051 */
  --bo-det-org:   400 13.5px/1.5 var(--vd-font-body);    /* [relevé] L1052 */
  --bo-det-when:  400 11.5px/1   var(--vd-font-mono);    /* [relevé] L1049 */
  --bo-fact-key:  500 10px/1     var(--vd-font-mono);    /* [relevé] L1056 */
  --bo-fact-val:  600 13px/1.4   var(--vd-font-body);    /* [relevé] L1057 */
  --bo-det-msg:   400 14px/1.65  var(--vd-font-body);    /* [relevé] L1062 */
  /* [conception] largeur du tiroir de détail. Son voile est celui de la modale
     partagée (`--bo-modal-veil`), déjà densifié en thème sombre : deux couches
     de recouvrement du backoffice n'ont aucune raison d'être de deux teintes. */
  --bo-drawer-w:  min(560px, 100vw);

  /* ---------- SESSIONS DE FORMATION (écran 8) ---------- */
  --bo-cal-label: 700 17px/1.2   var(--vd-font-display); /* [relevé] L945 */
  --bo-cal-day:   600 10.5px/1   var(--vd-font-mono);    /* [relevé] L954 */
  --bo-cal-num:   600 11.5px/1   var(--vd-font-mono);    /* [relevé] L961 */
  --bo-ev-title:  600 11.5px/1.3 var(--vd-font-body);    /* [relevé] L964 */
  --bo-ev-seats:  400 10px/1.3   var(--vd-font-mono);    /* [relevé] L965 */
  --bo-step-f:    600 15px/1     var(--vd-font-body);    /* [relevé] L944 */
  --bo-gauge-f:   500 12px/1     var(--vd-font-mono);    /* [relevé] L999 */
  --bo-cell-h:    104px;   /* [relevé] L960 — hauteur mini d'une case */
  --bo-cal-w:     190px;   /* [relevé] L945 — largeur mini de l'intitulé */
  --bo-gauge-w:   64px;    /* [relevé] L996 */
  --bo-table-min-s: 760px; /* [relevé] L977 */

  /* ---------- RÉGLAGES, COMPTES, JOURNAL (écrans 11 à 13) ---------- */
  --bo-page-name:   600 14px/1.3    var(--vd-font-body);  /* [relevé] L1270 */
  --bo-page-label:  500 10.5px/1    var(--vd-font-mono);  /* [relevé] L1274 */
  --bo-role-f:      500 12.5px/1.3  var(--vd-font-body);  /* [relevé] L1364 */
  --bo-avatar-sm:   600 11px/1      var(--vd-font-mono);  /* [relevé] L1356 */
  --bo-person-name: 600 13.5px/1.35 var(--vd-font-body);  /* [relevé] L1358 */
  --bo-person-mail: 400 11.5px/1.35 var(--vd-font-mono);  /* [relevé] L1359 */
  --bo-logline-f:   400 13.5px/1.5  var(--vd-font-body);  /* [relevé] L1391 */
  --bo-table-min-u: 700px;  /* [relevé] L1342 */

  /* ---------- MÉDIATHÈQUE (écran 9) ---------- */
  --bo-media-min:   212px;  /* [relevé] L1098 — largeur mini d'une vignette */
  --bo-media-ratio: 4/3;    /* [relevé] L1101 */
  --bo-media-dim:   500 11px/1     var(--vd-font-mono);  /* [relevé] L1102 */
  --bo-media-name:  600 12.5px/1.4 var(--vd-font-body);  /* [relevé] L1105 */
  --bo-media-meta:  400 11px/1.4   var(--vd-font-mono);  /* [relevé] L1106 */
  --bo-media-alt:   400 12px/1.4   var(--vd-font-body);  /* [relevé] L1107 */
  --bo-media-act:   600 11.5px/1.3 var(--vd-font-body);  /* [relevé] L1109-1110 */
  --bo-stripe-step: 10px;   /* [relevé] L1101 — pas des rayures de la vignette */
  --bo-bar-h:       8px;    /* [relevé] L1451 — barre de progression */
  --bo-r-4:         4px;    /* [relevé] L1451-1452 */
  --bo-t-bar:       width .18s linear; /* [relevé] L1452 */
}

/* ------------------------------------------------------------
   1. POLICES — extraites du manifeste de la maquette (L44-476).
   Space Grotesk et Manrope sont des polices variables : un fichier
   par sous-ensemble couvre toutes les graisses. JetBrains Mono idem.
   ------------------------------------------------------------ */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/space-grotesk-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/manrope-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/jetbrains-mono-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}