/* ============================================================================
   byjo.css — primitives visuelles byjo.design
   Source unique de vérité. Loi : resources/brand/MIES.md
   N'écris jamais une couleur, une taille ou une marge qui ne sorte pas d'ici.
   ============================================================================ */

@font-face{
  font-family:"Jost";
  src:url("fonts/Jost[wght].ttf") format("truetype-variations"),
      url("fonts/Jost[wght].ttf") format("truetype");
  font-weight:200 600; font-style:normal; font-display:swap;
}

:root{
  /* — Art. 1 · palette close ———————————————————————————————————— */
  --noir:#000000;
  --encre:#272727;
  --charbon:#3E3E3E;
  --gris:#999999;
  --filet:#DDDDDD;
  --champ:#F6F6F6;
  --papier:#FFFFFF;

  /* — Art. 2 · typographie ——————————————————————————————————————— */
  /* Jost EN TÊTE : la Futura système ne contient que Medium et Bold —
     elle écrase les graisses 200/300/400 de l'art. 2. */
  --jost:"Jost","Futura","Century Gothic","Twentieth Century",sans-serif;
  --t-11:11px; --t-13:13px; --t-16:16px; --t-21:21px;
  --t-28:28px; --t-38:38px; --t-52:52px;
  --g-apparat:200; --g-fine:300; --g-corps:400; --g-forte:500; --g-lourde:600;
  --c-large:.30em; --c-titre:.24em; --c-inter:.18em; --c-legende:.14em; --c-corps:.01em;

  /* — Art. 3 · rythme sur 8 —————————————————————————————————————— */
  --e-0:4px;  --e-1:8px;  --e-2:16px; --e-3:24px;
  --e-4:32px; --e-5:48px; --e-6:64px; --e-7:96px;
  --bandeau:56px;
  --mesure:68ch;

  /* — Art. 6 · mouvement ————————————————————————————————————————— */
  --duree:160ms;
  --courbe:cubic-bezier(.2,0,0,1);
}

/* ---------------------------------------------------------------- socle -- */

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

html,body{ margin:0; padding:0; }

body{
  background:var(--papier);
  color:var(--encre);
  font-family:var(--jost);
  font-weight:var(--g-fine);          /* Art. 2 — le corps est en 300 */
  font-size:var(--t-16);
  line-height:1.55;
  letter-spacing:var(--c-corps);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;   /* Art. 2 — les chiffres s'alignent */
}

/* Art. 2 — l'italique n'existe pas dans cette maison */
i,em,cite,address{ font-style:normal; }

img,svg{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--filet);
   transition:border-color var(--duree) var(--courbe); }
a:hover{ border-color:var(--noir); }

/* ------------------------------------------------------- typographie ---- */

.byjo-apparat,
.byjo-titre,
.byjo-section,
.byjo-inter,
.byjo-etiquette,
.byjo-legende{
  font-family:var(--jost);
  text-transform:uppercase;
  margin:0;
}

.byjo-apparat  { font-size:var(--t-52); font-weight:var(--g-apparat); letter-spacing:var(--c-large);  line-height:1.1; }
.byjo-titre    { font-size:var(--t-38); font-weight:var(--g-fine);    letter-spacing:var(--c-titre);  line-height:1.15; }
.byjo-section  { font-size:var(--t-28); font-weight:var(--g-fine);    letter-spacing:var(--c-titre);  line-height:1.2; }
.byjo-inter    { font-size:var(--t-21); font-weight:var(--g-forte);   letter-spacing:var(--c-inter);  line-height:1.25; }
.byjo-etiquette{ font-size:var(--t-11); font-weight:var(--g-corps);   letter-spacing:var(--c-large);  color:var(--gris); }
.byjo-legende  { font-size:var(--t-13); font-weight:var(--g-corps);   letter-spacing:var(--c-legende);color:var(--gris); }

.byjo-corps    { font-size:var(--t-16); max-width:var(--mesure); margin:0; }
.byjo-second   { color:var(--charbon); }
.byjo-tertiaire{ color:var(--gris); }

/* Art. 5 — le vide entre les blocs, jamais moins de 24 px */
.byjo-corps + .byjo-corps,
.byjo-corps + .byjo-section,
.byjo-section + .byjo-corps{ margin-top:var(--e-3); }

/* --------------------------------------------------------------- traits -- */

.byjo-filet     { border:0; border-top:1px solid var(--filet); margin:var(--e-3) 0; }
.byjo-filet-fort{ border:0; border-top:1px solid var(--noir);  margin:var(--e-5) 0; } /* structurel, rare */

/* --------------------------------------------------------------- objets -- */

.byjo-feuille{
  max-width:1120px;
  margin:0 auto;
  background:var(--papier);
  border:1px solid var(--filet);
  padding:var(--e-5);
}

.byjo-carte{
  background:var(--papier);
  border:1px solid var(--filet);
  /* Art. 4 — pas d'arrondi, pas d'ombre, pas de liseré d'accent */
}

.byjo-carte__bandeau{
  height:var(--bandeau);          /* Art. 3 — verrouillée, jamais variable */
  min-height:var(--bandeau);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--e-2);
  padding:0 var(--e-2);
  background:var(--champ);
  border-bottom:1px solid var(--filet);
  overflow:hidden;
}

.byjo-carte__corps{ padding:var(--e-2); }   /* Art. 5 — l'extérieur respire plus */

/* Art. 1 — l'anomalie se marque au carré noir plein, pas à la couleur */
.byjo-marque{
  width:8px; height:8px;
  background:var(--noir);
  display:inline-block;
  flex:none;
}
.byjo-fait{ color:var(--gris); }            /* ce qui est fait s'efface */
.byjo-attendu{ color:var(--encre); font-weight:var(--g-forte); }

/* -------------------------------------------------------------- tableau -- */

.byjo-tableau{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
  font-size:var(--t-13);
}
.byjo-tableau th{
  text-align:left;
  font-size:var(--t-11);
  font-weight:var(--g-forte);
  letter-spacing:var(--c-large);
  text-transform:uppercase;
  color:var(--gris);
  padding:var(--e-1) var(--e-1) var(--e-1) 0;
  border-bottom:1px solid var(--noir);      /* en-tête = structurel */
}
.byjo-tableau td{
  padding:var(--e-1) var(--e-1) var(--e-1) 0;
  border-bottom:1px solid var(--filet);
  vertical-align:top;
}
.byjo-tableau .num{ text-align:right; padding-right:0; white-space:nowrap; }

/* ------------------------------------------------------------ mouvement -- */

.byjo-apparait{
  animation:byjo-fondu var(--duree) var(--courbe) both;
}
@keyframes byjo-fondu{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:none; }
}

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