/* Direction N « En Bonnes Mains » — Automotive EBM — jetons et composants communs
   Auteur : Claude Opus 5.5, bras d'Opus 5.5 Pilot (direction N), 24/09/2026.
   Polices : Saira Condensed (titres, tableau) et Figtree (texte), Google Fonts, licence SIL OFL. */
:root{
  --jaune:#F5C21B;      /* Jaune Genius : la tête, ce que sait et affiche l'IA */
  --jaune-b:#E2AC0B;    /* volet bas d'une tuile jaune */
  --encre:#17150F;      /* Encre : les mains, ce que valide et remet un humain */
  --pierre:#ECE5D6;     /* Pierre de Nîmes : le fond du jour */
  --pierre-2:#E3DAC7;
  --papier:#FAF7F0;     /* cartes, documents */
  --volet:#24221C;      /* tuile du tableau, volet haut */
  --volet-b:#1D1B16;    /* tuile du tableau, volet bas */
  --graphite:#6F6A5F;   /* texte secondaire sur fond clair */
  --ivoire:#F4EFE4;     /* lettres du tableau */
  --brume:#A7A091;      /* texte secondaire sur fond encre */
  --filet:#D6CCB8;
  --f-titre:'Saira Condensed','Arial Narrow','Roboto Condensed',sans-serif;
  --f-texte:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Tableau à volets ---------- */
.tableau{display:inline-grid;gap:var(--ecart,4px);grid-auto-flow:row;perspective:900px}
.tableau .ligne{display:flex;gap:var(--ecart,4px)}
.tuile{position:relative;width:var(--tw,40px);height:var(--th,56px);flex:0 0 auto;border-radius:var(--tr,5px);
  box-shadow:0 1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03)}
.tuile .m, .tuile .v{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:var(--volet);
  backface-visibility:hidden}
.tuile .h, .tuile .vh{top:0;border-radius:var(--tr,5px) var(--tr,5px) 0 0;background:var(--volet)}
.tuile .b, .tuile .vb{top:50%;border-radius:0 0 var(--tr,5px) var(--tr,5px);background:var(--volet-b)}
.tuile .vh{transform-origin:50% 100%;z-index:3;visibility:hidden}
.tuile .vb{transform-origin:50% 0%;z-index:3;visibility:hidden}
.tuile span{position:absolute;left:0;top:0;width:100%;height:var(--th,56px);line-height:var(--th,56px);text-align:center;
  font-family:var(--f-titre);font-weight:700;font-size:calc(var(--th,56px) * .74);color:var(--ivoire);letter-spacing:0;
  font-variant-numeric:tabular-nums}
.tuile .b span, .tuile .vb span{top:calc(var(--th,56px) / -2)}
.tuile::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1.5px;background:rgba(0,0,0,.55);z-index:4}
.tuile .h.j, .tuile .vh.j{background:var(--jaune)}
.tuile .b.j, .tuile .vb.j{background:var(--jaune-b)}
.tuile .j span{color:var(--encre)}
.tuile .h.c, .tuile .vh.c{background:#FFFDF7}
.tuile .b.c, .tuile .vb.c{background:#EFE8D8}
.tuile .c span{color:var(--encre)}
.tuile .n span{opacity:0}
.tableau.clair .tuile::after{background:rgba(23,21,15,.22)}

/* ---------- Pastille de marque (logo en plaque) ---------- */
.plaque{display:inline-flex;align-items:center;justify-content:center;background:var(--encre);border-radius:14px;padding:14px 18px}
.plaque img{display:block}