/* Socle : remise à zéro, typographie, liens, états.
   Rien de spécifique à un composant ici. */

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

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

body {
  margin: 0;
  background: var(--mb-bg);
  color: var(--mb-ink);
  font-family: var(--mb-font-body);
  font-size: var(--mb-body);
  line-height: var(--mb-body-lh);
  font-weight: var(--mb-weight-body);
  font-synthesis-weight: none; /* pas de faux gras : la graisse doit venir du fichier */
  text-rendering: optimizeLegibility;
}

/* — titres — */
h1, h2, h3, h4 {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-weight-display);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--mb-h1); line-height: var(--mb-h1-lh); }
h2 { font-size: var(--mb-h2); line-height: var(--mb-h2-lh); }
h3 { font-size: var(--mb-h3); line-height: var(--mb-h3-lh); }

/* — texte courant —
   Justifié conformément à la DA. La césure est indispensable en français
   justifié, sans quoi les lézardes s'ouvrent dès que la colonne se resserre ;
   elle exige lang="fr" sur <html>. */
p {
  margin: 0 0 1.1em;
  max-width: var(--mb-measure);
  color: var(--mb-ink-soft);
}
.mb-justify {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 640px) {
  /* Sous ~45 signes, le justifié devient illisible même avec césure. */
  .mb-justify { text-align: left; }
}

strong { font-weight: var(--mb-weight-ui); }
em, blockquote { font-style: italic; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* — liens — */
a {
  color: var(--mb-bordeaux-700);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--mb-bordeaux-900); }

/* — chiffres —
   Tabulaires dans les dates, honoraires et numérotations ; le texte courant
   garde ses chiffres par défaut. */
.mb-tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* — listes éditoriales sans puce — */
.mb-bare { list-style: none; margin: 0; padding: 0; }

/* — images — */
img { max-width: 100%; height: auto; display: block; }

/* — états — */
:focus-visible {
  outline: 2px solid var(--mb-bordeaux-700);
  outline-offset: 2px;
}
.mb-dark :focus-visible { outline-color: var(--mb-gold); }
::selection { background: var(--mb-bordeaux-100); }

/* — accès clavier : lien d'évitement — */
/* Texte réservé aux lecteurs d'écran. Sert notamment à prévenir qu'un lien
   ouvre un nouvel onglet : sans cet avertissement, une personne aveugle ou
   naviguant au clavier perd le fil sans comprendre pourquoi le bouton
   « précédent » ne la ramène plus. */
.mb-hidden-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mb-bg);
  color: var(--mb-bordeaux-700);
  padding: 12px 18px;
  border: var(--mb-rule) solid var(--mb-bordeaux-700);
  z-index: 100;
}
.mb-skip:focus {
  left: 12px;
  top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}