/* Composants. Un principe gouverne le fichier : le filet de 1 px porte la
   structure, la couleur trace mais ne remplit pas. Aucune ombre, aucun angle
   arrondi, aucune carte flottante. */

/* ————— accroches et filets ————— */

.mb-kicker {
  font-size: var(--mb-caps);
  letter-spacing: var(--mb-caps-tracking);
  text-transform: uppercase;
  color: var(--mb-bordeaux-700);
  margin: 0;
}
.mb-dark .mb-kicker { color: var(--mb-gold); }

.mb-filet {
  height: var(--mb-rule);
  width: 76px;
  background: var(--mb-gold);
  border: 0;
  margin: 30px 0;
}

.mb-num {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--mb-gold);
}

/* Entête de section : accroche à gauche, précision à droite, trait dessous. */
.mb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: var(--mb-rule) solid var(--mb-ink);
  padding-bottom: 12px;
}
.mb-section-head__note {
  font-size: 0.75rem;
  color: var(--mb-ink-muted);
}
.mb-dark .mb-section-head { border-bottom-color: var(--mb-gold-rule); }
.mb-dark .mb-section-head__note { color: var(--mb-on-dark-muted); }

/* ————— actions ————— */

/* Un seul appel à l'action par écran, répété à l'identique :
   « Demander un premier entretien ». */
.mb-btn {
  display: inline-block;
  border: var(--mb-rule) solid currentColor;
  background: transparent;
  border-radius: var(--mb-radius);
  color: var(--mb-bordeaux-700);
  font-family: var(--mb-font-display);
  font-size: 0.9375rem;
  font-weight: var(--mb-weight-ui);
  letter-spacing: 0.05em;
  padding: 13px 24px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
/* La rampe bordeaux sert aux états : c'est le seul fond teinté autorisé. */
.mb-btn:hover { background: var(--mb-bordeaux-100); color: var(--mb-bordeaux-900); }
.mb-dark .mb-btn { color: var(--mb-on-dark); }
.mb-dark .mb-btn:hover { background: rgba(251, 249, 248, 0.10); color: var(--mb-on-dark); }

/* ————— appel à l'action en aplat doré —————
   L'or de la charte, seul jaune de la palette, employé ici en fond et non en
   trait : c'est le seul endroit du site où il déroge à la règle du trait, et
   c'est assumé — un bouton d'appel doit se voir avant tout le reste.

   Le texte est en bordeaux profond : 5,22:1 sur l'or, au-dessus du seuil, là
   où le crème n'aurait donné que 3,21:1 et l'accent bordeaux 4,11:1. Sur
   l'aplat sombre, la règle .mb-dark .mb-btn passerait le texte en crème : elle
   est neutralisée ici, sans quoi le bouton deviendrait illisible. */
/* Les deux états sont inversés par rapport à la première version : au repos le
   bouton est cerné d'or sur l'aplat, et c'est le survol qui le remplit. Le
   contour est rentré à l'intérieur par une ombre portée plutôt qu'élargi : un
   border plus large aurait décalé le bouton par rapport au lien voisin. */
.mb-btn--or,
.mb-dark .mb-btn--or {
  background: transparent;
  border-color: var(--mb-gold);
  box-shadow: inset 0 0 0 2px var(--mb-gold);
  color: var(--mb-gold);
  font-weight: 700;
}
.mb-btn--or:hover,
.mb-btn--or:focus-visible,
.mb-dark .mb-btn--or:hover,
.mb-dark .mb-btn--or:focus-visible {
  background: var(--mb-gold);
  border-color: var(--mb-bordeaux-900);
  box-shadow: inset 0 0 0 2px var(--mb-bordeaux-900);
  color: var(--mb-bordeaux-900);
}

.mb-link-quiet {
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.mb-dark .mb-link-quiet { color: var(--mb-on-dark-soft); }

.mb-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 38px;
}

/* ————— navigation ————— */

.mb-nav {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 36px);
  padding-block: 22px;
}
/* Le filet du bandeau, en deux temps plutôt qu'un trait plat.
   ::before — un filet pleine largeur qui s'éteint vers la droite : il tient la
   structure sans barrer l'écran d'un trait uniforme.
   ::after — un accent court et franc, calé sous le logotype, à la manière d'un
   filet gras de composition. C'est lui qui donne le point de départ visuel.
   Les deux sont décoratifs ; aucune information n'en dépend. */
.mb-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--mb-rule);
  /* Deux couches : le filet lui-même, qui ne bouge pas, et par-dessus une
     lueur étroite qui le parcourt lentement de gauche à droite. Seule la
     position de la lueur est animée ; le filet reste en place.
     La position déclarée ici place la lueur hors champ : c'est donc l'état
     qu'obtiennent les personnes ayant demandé moins d'animations, la règle
     prefers-reduced-motion du site neutralisant l'animation. Elles voient un
     filet net, jamais un halo figé au milieu. */
  background-image:
    linear-gradient(to right,
      rgba(182, 130, 53, 0) 0%,
      rgba(182, 130, 53, 0.5) 50%,
      rgba(182, 130, 53, 0) 100%),
    linear-gradient(to right,
      var(--mb-gold-rule) 0%,
      var(--mb-gold-rule) 46%,
      rgba(182, 130, 53, 0.10) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 34% 100%, 100% 100%;
  background-position: -40% 0, 0 0;
  animation: mb-filet-onde 15s ease-in-out infinite;
}
@keyframes mb-filet-onde {
  0%   { background-position: -40% 0, 0 0; }
  100% { background-position: 140% 0, 0 0; }
}
.mb-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: clamp(56px, 8vw, 84px);
  height: 2px;
  background: var(--mb-gold);
}

/* Bandeau de navigation : le logotype réel, en version claire pour l'aplat
   bordeaux, à largeur réduite. Ses deux dernières lignes n'y sont plus lisibles
   — elles font office de texture — mais le nom du cabinet reste porté par
   l'attribut alt, donc annoncé aux lecteurs d'écran et lu par les moteurs. */
.mb-logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}
.mb-logo .mb-logomark {
  width: clamp(84px, 11vw, 112px);
}

.mb-nav__list {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mb-nav__link {
  color: rgba(251, 249, 248, 0.82);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.mb-nav__link:hover,
.mb-nav__link[aria-current] {
  color: var(--mb-on-dark);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.mb-nav__cta {
  color: var(--mb-on-dark);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  border: var(--mb-rule) solid rgba(251, 249, 248, 0.6);
  padding: 8px 15px;
  white-space: nowrap;
}
.mb-nav__cta:hover { background: rgba(251, 249, 248, 0.10); }

/* Le bouton n'apparaît que si le JS a pris la main : sans JS, la navigation
   reste entièrement visible et utilisable. */
.mb-nav__toggle { display: none; }
[data-js='on'] .mb-nav__toggle {
  display: none;
  background: transparent;
  border: var(--mb-rule) solid rgba(251, 249, 248, 0.6);
  color: var(--mb-on-dark);
  font-family: var(--mb-font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}

/* ————— déroulé des matières —————
   Le parent reste un lien vers la section des domaines : sans JavaScript, au
   doigt sur un écran tactile, ou si le déroulé ne s'ouvre pas, on atterrit
   quand même au bon endroit. Le déroulé n'ajoute qu'un raccourci.

   Il s'ouvre au survol et au passage du clavier (:focus-within), non par un
   script. Un ::before invisible ponte l'espace entre le lien et le panneau,
   sans quoi la souris le referme en descendant. */
.mb-nav__item { position: relative; }
.mb-nav__sub {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 30;
  min-width: 274px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--mb-bordeaux-900);
  border: var(--mb-rule) solid var(--mb-gold-rule);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.mb-nav__sub::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.mb-nav__item:hover .mb-nav__sub,
.mb-nav__item:focus-within .mb-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mb-nav__sub a {
  display: block;
  padding: 10px 18px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(251, 249, 248, 0.82);
  text-decoration: none;
}
.mb-nav__sub a[aria-current='page'],
.mb-nav__sub a:hover,
.mb-nav__sub a:focus-visible {
  color: var(--mb-on-dark);
  background: rgba(182, 130, 53, 0.14);
}

@media (max-width: 900px) {
  [data-js='on'] .mb-nav__toggle { display: block; }
  [data-js='on'] .mb-nav__panel {
    display: none;
    width: 100%;
    order: 3;
  }
  [data-js='on'] .mb-nav__panel[data-open='true'] { display: block; }
  .mb-nav { flex-wrap: wrap; }
  .mb-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 12px;
  }
  .mb-nav__list li { width: 100%; }
  .mb-nav__link {
    display: block;
    padding: 14px 0;
    border-top: var(--mb-rule) solid var(--mb-gold-rule);
    font-size: 0.9375rem;
  }
  /* Sur petit écran, plus de survol : le déroulé devient une simple liste en
     retrait, toujours visible, à l'intérieur du panneau déplié. */
  .mb-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0 0 8px 18px;
  }
  .mb-nav__sub::before { content: none; }
  .mb-nav__sub a { padding: 9px 0; font-size: 0.8438rem; }
  .mb-nav__cta { display: inline-block; margin-top: 14px; }
}

/* ————— hero ————— */

.mb-hero__text { padding-block: clamp(48px, 7vw, 88px) clamp(52px, 7vw, 96px); }
.mb-hero__lede {
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mb-on-dark-soft);
  margin: 0;
}

/* Entête des pages internes : même aplat que le hero, sans portrait.
   Le titre est borné en pixels et non en `ch` — une largeur en `ch` se calcule
   dans la police du conteneur, celle du corps, et étranglerait un titre composé
   en Cormorant à 70 px. */
.mb-hero--page { padding-block: clamp(36px, 5vw, 60px) clamp(48px, 6vw, 76px); }
.mb-hero--page h1 { max-width: 620px; }
/* Le chapeau d'une page interne dispose de toute la largeur de la bannière,
   sans portrait à sa droite : la mesure de 46 signes, taillée pour la colonne
   de l'accueil, y empile le texte en une bande étroite collée à gauche. On
   revient à la mesure de lecture du site, 62 signes, qui reste dans les bornes
   typographiques et occupe la bannière. */
.mb-hero--page .mb-hero__lede {
  margin-top: 0;
  max-width: var(--mb-measure);
}

/* ————— planche photographique —————
   Passe-partout clair de 6 px, filet extérieur de 1 px.
   Aucune photo d'illustration : portrait ou matière, rien d'autre.

   Écart assumé : la direction artistique prescrivait un grade noir et blanc.
   Le portrait reste en couleur, à la demande de l'avocate. Seul un très léger
   renfort de contraste subsiste. Pour revenir à la DA, rétablir
   `grayscale(1)` sur la ligne ci-dessous. */

.mb-plate {
  filter: contrast(1.05);
  /* Passe-partout crème de 6 px, puis un liseret d'or d'un pixel autour —
     demande de l'avocate. Le liseret remplace le filet gris d'origine : deux
     traits concentriques se seraient brouillés, et le gris disparaissait de
     toute façon sur l'aplat bordeaux du bandeau.

     C'est un emploi conforme à la DA, qui réserve l'or au trait. */
  border: 6px solid rgba(251, 249, 248, 0.9);
  outline: var(--mb-rule) solid var(--mb-gold);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
/* Le cadrage 4:5 rogne l'image : --plate-focus désigne le point à garder au
   centre quand le sujet n'est pas au milieu du cliché. 50% 50% par défaut. */
.mb-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--plate-focus, 50% 50%);
}

/* Réservation visuelle tant que le portrait définitif n'est pas livré. */
.mb-plate--empty {
  background: repeating-linear-gradient(135deg, #efecea 0 8px, #e6e2e0 8px 16px);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
}
.mb-plate--empty span {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(36, 28, 30, 0.55);
  line-height: 1.9;
}

/* ————— bandeau de promesses ————— */

/* La DA demande les trois engagements sur une seule ligne : à 1180 px, les
   textes n'y tiennent qu'avec un écart resserré. En dessous, le retour à la
   ligne est le comportement voulu. */
.mb-promises {
  display: flex;
  gap: 14px clamp(20px, 3vw, 38px);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--mb-ink-muted);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mb-promises li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.mb-promises .mb-num { font-size: 0.6875rem; }

/* Un titre de ligne éditoriale peut mener à la page de la matière. Il garde la
   couleur d'encre : trois grands titres soulignés en bordeaux alourdiraient la
   page, alors que la DA veut le silence autour du texte. Le lien se signale au
   survol et au clavier. */
.mb-editorial h3 a {
  color: inherit;
  text-decoration: none;
}
.mb-editorial h3 a:hover,
.mb-editorial h3 a:focus-visible {
  color: var(--mb-bordeaux-700);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ————— ligne éditoriale appuyée —————
   Variante pour les lignes qui portent une promesse plutôt qu'une matière : le
   titre passe en bordeaux (9,84:1 sur l'aplat teinté) et s'ouvre d'un filet or.
   Le filet n'est que décor — il ne porte aucune information, sans quoi ses
   2,98:1 seraient insuffisants. Le numéro grossit d'un cran pour tenir devant
   un titre plus présent. */
/* Le titre est précédé d'une flèche, à la demande de l'avocate. Elle remplace
   le filet d'or horizontal qui le surmontait auparavant : deux marques d'or sur
   un même titre se seraient neutralisées, et la flèche fait mieux le travail —
   elle désigne au lieu de souligner.

   Dessinée en SVG et non écrite au clavier : le caractère → (U+2192) est absent
   des sous-ensembles auto-hébergés de Cormorant Garamond et d'Instrument Sans.
   Le navigateur irait le chercher dans une police de secours, d'un dessin
   étranger au reste de la page — le même écueil que la coche des listes. */
.mb-editorial--accent h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--mb-bordeaux-700);
  /* 600 est la graisse haute de la variable Cormorant Garamond : le navigateur
     n'épaissit rien lui-même, ce qui préserve les déliés fins de la police. */
  font-weight: var(--mb-weight-ui);
}
.mb-editorial--accent h3 svg {
  width: 22px;
  flex: none;
  color: var(--mb-gold);
  /* Alignée sur la ligne de base du texte plutôt que centrée : sur un titre de
     deux lignes, elle doit désigner la première. */
  align-self: flex-start;
  margin-top: 0.34em;
}
.mb-editorial--accent .mb-num { font-size: 0.9375rem; }

/* ————— blocs de rubrique —————
   Écart assumé par rapport à la direction artistique, qui proscrit les cartes
   juxtaposées (voir la règle .mb-editorial dans layout.css). L'avocate a demandé
   une présentation par blocs, pour que les titres de rubrique accrochent l'œil
   au lieu de se fondre dans une suite de lignes.

   Le vocabulaire de la DA est conservé : angles vifs, filet d'un pixel, aucune
   ombre portée, aucun aplat supplémentaire. Ce qui distingue le bloc, c'est son
   arête haute en bordeaux — la même encre que les liens et les filets. L'or
   n'est pas employé ici : la DA le réserve au trait, jamais au texte.

   Le composant n'agit qu'à l'intérieur d'un conteneur .mb-blocs ; .mb-editorial
   reste inchangé partout ailleurs. */
.mb-blocs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.mb-blocs .mb-editorial {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(24px, 2.6vw, 32px);
  border: var(--mb-rule) solid var(--mb-divider);
  border-top: 2px solid var(--mb-bordeaux-700);
}
.mb-blocs .mb-editorial:last-of-type {
  border-bottom: var(--mb-rule) solid var(--mb-divider);
}

/* Le numéro n'est plus une colonne : il devient l'étiquette du bloc. */
.mb-blocs .mb-num {
  font-size: var(--mb-caps);
  letter-spacing: var(--mb-caps-tracking);
  color: var(--mb-bordeaux-700);
  margin: 0 0 14px;
}

.mb-blocs .mb-editorial h3 {
  margin: 0 0 16px;
  color: var(--mb-bordeaux-700);
}
.mb-blocs .mb-editorial p:last-child { margin-bottom: 0; }

/* Un bloc par ligne : deux colonnes rendraient les colonnes trop étroites pour
   du texte justifié. */
@media (max-width: 900px) {
  .mb-blocs { grid-template-columns: 1fr; }
}

/* ————— intitulé de matière —————
   Les trois matières de l'accueil : le titre passe en bordeaux et se fait
   précéder d'un pictogramme, à la demande de l'avocate.

   Le pictogramme est un dessin au trait, sans aplat — c'est le seul emploi que
   la DA autorise pour l'or, qu'elle réserve au filet. Il est décoratif :
   `aria-hidden`, jamais porteur d'information, et le titre se suffit sans lui.
   La DA proscrit les photos d'illustration ; un glyphe tracé n'en est pas une. */
/* ————— les trois matières, en colonnes —————
   Une colonne par matière plutôt qu'une ligne éditoriale par matière : les
   trois se comparent d'un coup d'œil au lieu de se lire l'une après l'autre.
   Le filet supérieur remplace celui de .mb-editorial, qui séparait des lignes
   empilées. Empilement sous 900 px, la colonne devenant trop étroite pour un
   titre de trois mots. */
.mb-domaines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: 48px;
}
/* Chaque matière sur son propre fond. Le filet d'un pixel ne suffisait pas :
   à la lecture, les trois colonnes se confondaient en un seul bloc de texte.

   Le fond est celui des bandes de section (--mb-bg-alt) : aucune couleur
   nouvelle n'entre dans la palette. L'arête haute en bordeaux reprend celle
   des blocs de rubrique des pages de domaine, pour que l'accueil et les pages
   qu'il annonce se répondent. */
.mb-domaines > article {
  background: var(--mb-bg-alt);
  border: var(--mb-rule) solid var(--mb-divider);
  border-top: 2px solid var(--mb-bordeaux-700);
  padding: clamp(22px, 2.4vw, 30px);
}
/* Sur fond teinté, le filet des étiquettes doit se voir un peu plus. */
.mb-domaines .mb-tag { border-color: rgba(36, 28, 30, 0.24); }
.mb-domaines .mb-num { display: block; margin-bottom: 16px; }
.mb-domaines h3 { margin-bottom: 16px; }
.mb-domaines p { font-size: 0.9062rem; line-height: 1.7; }
@media (max-width: 900px) {
  .mb-domaines { grid-template-columns: 1fr; }
}

.mb-domaines h3 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--mb-bordeaux-700);
  /* 600 est la graisse haute de la variable Cormorant Garamond : le navigateur
     n'a donc rien à épaissir lui-même, ce qui préserve le dessin des lettres. */
  font-weight: var(--mb-weight-ui);
}
/* En colonne étroite le titre passe sur deux ou trois lignes : le pictogramme
   s'aligne sur la première, non au milieu du bloc. */
.mb-domaines h3 svg {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 0.18em;
  color: var(--mb-gold);
}
/* Le titre étant déjà bordeaux, c'est le soulignement qui signale le survol. */
.mb-domaines h3 a:hover,
.mb-domaines h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (max-width: 640px) {
  .mb-domaines h3 { gap: 10px; }
  .mb-domaines h3 svg { width: 20px; height: 20px; }
}

/* ————— mode de facturation —————
   Les trois modes de la page honoraires : titre en semi-gras, précédé d'un
   pictogramme au trait, en or comme ceux des matières de l'accueil.

   Le semi-gras est demandé par l'avocate. À 21 px on reste dans les corps où
   la DA l'admet ; il ne faudrait pas le porter sur un titre plus grand, où il
   épaissirait le dessin de la Cormorant au lieu de le mettre en valeur. */
.mb-qa--mode h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--mb-weight-ui);
}
.mb-qa--mode h3 svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--mb-gold);
}

/* ————— notule —————
   Information de service, exacte mais secondaire : modalités de règlement,
   forme d'exercice. Elle se lit si on la cherche et ne pèse pas sur la page.

   Trois colonnes plutôt qu'une liste verticale : à ce corps, une colonne
   unique s'étirerait sur toute la largeur et se lirait mal ; trois colonnes
   courtes se parcourent d'un regard et occupent peu de hauteur. */
.mb-notule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 26px;
  font-size: 0.8438rem;
  line-height: 1.6;
  color: var(--mb-ink-muted);
}
.mb-notule p { margin: 0; }
.mb-notule strong {
  display: block;
  margin-bottom: 6px;
  color: var(--mb-ink);
  font-weight: var(--mb-weight-ui);
}

@media (max-width: 900px) {
  .mb-notule { grid-template-columns: 1fr; gap: 18px; }
}

/* ————— étiquettes de domaine ————— */

.mb-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mb-tag {
  display: inline-block;
  border: var(--mb-rule) solid var(--mb-divider);
  font-size: 0.6562rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 10px;
  color: var(--mb-ink-muted);
  text-decoration: none;
}

/* Au survol, l'étiquette avance légèrement : le filet passe à l'or et l'encre
   au bordeaux. L'agrandissement reste faible — à 10,5 px en capitales, un zoom
   franc rendrait le texte flou le temps de l'animation.

   `hover: hover` réserve l'effet aux dispositifs qui pointent vraiment : sur un
   écran tactile, :hover se déclenche à la première touche et reste collé
   jusqu'au prochain appui ailleurs. L'étiquette n'étant pas cliquable, l'effet
   est purement décoratif — rien ne se perd si le navigateur l'ignore. */
@media (hover: hover) {
  .mb-tag {
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .mb-tag:hover {
    transform: scale(1.07);
    border-color: var(--mb-gold);
    color: var(--mb-bordeaux-700);
  }
}

/* Le même état au clavier. Sans cela, une personne qui tabule verrait le seul
   contour du navigateur et perdrait l'indication de couleur. */
.mb-tag:focus-visible {
  border-color: var(--mb-gold);
  color: var(--mb-bordeaux-700);
}

/* Une personne qui a demandé moins d'animations garde le changement de
   couleur, qui l'informe, et perd le mouvement, qui peut la gêner. */
@media (prefers-reduced-motion: reduce) {
  .mb-tag { transition: border-color 160ms ease, color 160ms ease; }
  .mb-tag:hover { transform: none; }
}

/* Petites capitales : insister sans hausser le ton. La lettre garde la hauteur
   d'œil du bas de casse, reste reconnaissable comme une capitale, et ne déchire
   pas la ligne comme le font des capitales pleines en plein texte.

   Le texte doit être saisi en bas de casse : la propriété n'agit que sur lui.
   Si le fichier de police ne porte pas le jeu dessiné (`smcp`), le navigateur
   le synthétise en réduisant des capitales — un peu moins fin, mais l'effet
   recherché est le même. */
.mb-pcap {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

/* ————— citation ————— */

.mb-quote {
  margin: 34px 0 0;
  padding-left: 24px;
  border-left: var(--mb-rule) solid var(--mb-gold);
  font-family: var(--mb-font-display);
  font-size: clamp(1.3125rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--mb-bordeaux-700);
  max-width: 36ch;
}

/* Sur aplat bordeaux, l'encre de la citation passe au crème et le filet à l'or
   assourdi : l'or plein, prévu pour le fond clair, vibre trop sur le sombre. */
.mb-dark .mb-quote {
  color: var(--mb-on-dark);
  border-left-color: var(--mb-gold-rule);
}

/* ————— parcours daté ————— */

.mb-aside-head {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mb-ink-muted);
}
.mb-aside {
  border-top: var(--mb-rule) solid var(--mb-ink);
  padding-top: 16px;
}
.mb-aside + .mb-aside {
  border-top-color: var(--mb-divider);
  margin-top: 32px;
}
.mb-timeline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 18px;
  margin: 16px 0 0;
  font-size: 0.8438rem;
  line-height: 1.5;
}
.mb-timeline dt {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  color: var(--mb-gold);
}
.mb-timeline dd { margin: 0; }

/* ————— tableau d'honoraires —————
   Deux colonnes, montants en Cormorant 20 px tabulaire. Pas de <table> :
   la relation prestation/montant est une liste de définitions. */

.mb-rates {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 24px;
  font-size: 0.9375rem;
  margin: 0;
}
.mb-rates dt,
.mb-rates dd {
  border-top: var(--mb-rule) solid var(--mb-divider);
  padding: 16px 0;
  margin: 0;
}
.mb-rates > dt:first-of-type,
.mb-rates > dt:first-of-type + dd { border-top-color: var(--mb-ink); }
.mb-rates > dt:last-of-type,
.mb-rates > dd:last-of-type { border-bottom: var(--mb-rule) solid var(--mb-divider); }
.mb-rates dd {
  text-align: right;
  font-family: var(--mb-font-display);
  font-size: 1.25rem;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mb-rates__detail {
  display: block;
  font-size: 0.7812rem;
  color: var(--mb-ink-muted);
  margin-top: 3px;
}

/* ————— coordonnées ————— */

.mb-contact-list {
  display: grid;
  gap: 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}
.mb-contact-list dt {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mb-on-dark-muted);
}
.mb-contact-list dd { margin: 5px 0 0; }
.mb-contact-list a { color: var(--mb-on-dark); text-underline-offset: 5px; }

/* Encart : ce qu'il est utile de préparer avant le premier appel. */
.mb-callout {
  border: var(--mb-rule) solid var(--mb-gold-rule);
  padding: 24px 26px;
}
/* Le fond clair est le cas par défaut : c'est celui qu'on oublie de déclarer.
   L'encadré est donc lisible sur le papier sans rien ajouter, et c'est la
   section sombre qui doit s'annoncer. L'inverse a produit un texte blanc sur
   blanc, invisible, à cinq endroits du site. */
.mb-callout ul {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--mb-ink);
}
.mb-callout--light ul { color: var(--mb-ink); } /* alias : plus nécessaire, conservé */
.mb-dark .mb-callout ul { color: var(--mb-on-dark-soft); }
.mb-callout li::marker { color: var(--mb-gold); }

/* ————— ce qui distingue le cabinet —————
   Trois cartes sur aplat teinté, chacune ouverte par un filet or. Plus appuyé
   que .mb-editorial, qui aligne des lignes de texte en pleine largeur : ce bloc
   doit accrocher l'œil avant le reste de la page, sans recourir à un troisième
   aplat bordeaux — la DA en fixe deux à trois par page, et le cabinet en a déjà
   deux (entête et bandeau de contact). */
.mb-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mb-highlights > li {
  background: var(--mb-bg);
  border-top: 2px solid var(--mb-gold);
  padding: 26px 24px 30px;
}
.mb-highlights .mb-num { display: block; margin-bottom: 16px; }

/* Tête de carte : le numéro à gauche, le symbole à droite. Le symbole illustre
   sans informer — le titre porte le sens — d'où aria-hidden. L'or donne 3,21:1
   sur le fond des cartes : suffisant pour un ornement, jamais pour une forme
   qui porterait du sens. */
.mb-highlights__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mb-highlights__head .mb-num { margin-bottom: 0; }
.mb-icone {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--mb-gold);
}
.mb-highlights h3 {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  font-weight: var(--mb-weight-ui);
  color: var(--mb-bordeaux-900);
  margin: 0 0 14px;
}
.mb-highlights p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--mb-ink-soft);
}
@media (max-width: 900px) {
  .mb-highlights { grid-template-columns: 1fr; }
}

/* ————— note dépliable —————
   <details> natif : aucune ligne de JavaScript, accessible au clavier, et le
   contenu reste lisible si la feuille de style ne charge pas. Un <summary> ne
   peut pas être inline dans un paragraphe : c'est donc toute la ligne qui est
   cliquable, et le mot mis en avant qui porte le pointillé signalant qu'il y a
   quelque chose à ouvrir. */
.mb-disclosure > summary {
  cursor: pointer;
  list-style: none;
}
.mb-disclosure > summary::-webkit-details-marker { display: none; }
.mb-disclosure > summary strong {
  color: var(--mb-bordeaux-700);
  border-bottom: 1px dotted var(--mb-bordeaux-700);
}
.mb-disclosure > summary:focus-visible {
  outline: 2px solid var(--mb-gold);
  outline-offset: 3px;
}
.mb-disclosure[open] > summary strong { border-bottom-style: solid; }
.mb-disclosure__note {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: var(--mb-rule) solid var(--mb-gold-rule);
  font-size: 0.7812rem;
  line-height: 1.7;
  color: var(--mb-ink-muted);
}

/* ————— encadré « en plus » —————
   Signale une intervention qui sort du litige : le lecteur inquiet qui parcourt
   la page doit voir qu'on ne l'attend pas seulement au contentieux. Teinte
   bordeaux très claire, filet or à gauche, symbole « plus » cerclé.
   Le symbole est décoratif — l'information est dans le titre, jamais dans
   l'icône — d'où aria-hidden. Il est tracé en bordeaux et non en or : l'or ne
   donne que 2,86:1 sur cette teinte, insuffisant pour une forme porteuse de
   sens. Texte : 8,94:1. */
.mb-bonus {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 32px;
  padding: 24px 26px;
  background: var(--mb-bordeaux-100);
  border-left: 3px solid var(--mb-gold);
}
.mb-bonus__mark {
  width: 26px;
  height: 26px;
  color: var(--mb-bordeaux-700);
}
.mb-bonus h3 {
  margin: 0 0 12px;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  color: var(--mb-bordeaux-700);
}
.mb-bonus p {
  margin: 0;
  font-size: 0.9062rem;
  line-height: 1.7;
  color: var(--mb-ink-soft);
}
.mb-bonus p + p { margin-top: 12px; }

/* Mise en évidence dans le corps du texte : bordeaux et graisse d'interface.
   10,61:1 sur le papier. Réservée à quelques mots — au-delà, plus rien ne
   ressort. La balise <strong> porte le sens, la classe porte l'apparence. */
.mb-emphase {
  color: var(--mb-bordeaux-700);
  font-weight: var(--mb-weight-ui);
}
/* Sur l'aplat bordeaux, l'accent bordeaux disparaît : 1,27:1. L'or y prend le
   relais, à 5,22:1 — au-dessus du seuil AA, et c'est ici du texte porteur de
   sens, non un ornement. Même principe que .mb-callout : le fond clair est le
   cas par défaut, la section sombre s'annonce. */
.mb-dark .mb-emphase { color: var(--mb-gold); }

/* Second niveau de relief sur l'aplat : le crème plein, là où le corps du
   texte est en crème adouci. Deux niveaux se lisent alors sans se concurrencer
   — l'or pour la matière, le crème pour les qualités. 16,76:1. */
.mb-dark strong { color: var(--mb-on-dark); }
.mb-dark .mb-emphase { color: var(--mb-gold); }
/* Dans un titre, l'emphase ne prend que la couleur. La DA veut le romain aux
   grands corps — « les grands corps prennent le romain » — et un semi-gras
   épaissirait le dessin de la Cormorant au lieu de le mettre en valeur. */
h1 .mb-emphase,
h2 .mb-emphase,
h3 .mb-emphase { font-weight: var(--mb-weight-display); }

/* ————— appel au défilement —————
   Un filet vertical qu'une pastille descend, sous le premier écran. Reprend le
   motif du filet doré de la charte plutôt qu'une flèche d'interface, qui
   jurerait avec la typographie.

   --cue vaut 1 en haut de page et tombe à 0 dès qu'on défile : le repère
   s'efface quand il a rempli son office. La valeur est posée par nav.js ; sans
   JavaScript le symbole reste simplement visible, ce qui est sans conséquence.
   Le mouvement de la pastille est une animation CSS : la règle
   prefers-reduced-motion du site la neutralise d'elle-même. */
.mb-scrollcue {
  --cue: 1;
  display: block;
  position: relative;
  width: 1px;
  height: 56px;
  margin: 44px auto 0;
  opacity: var(--cue);
  transform: translateY(calc((1 - var(--cue)) * 16px));
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mb-scrollcue__rail {
  position: absolute;
  inset: 0;
  background: var(--mb-gold-rule);
}
.mb-scrollcue__dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--mb-gold);
  animation: mb-cue-fall 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes mb-cue-fall {
  0%   { top: 0;    opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.mb-scrollcue:focus-visible {
  outline: 2px solid var(--mb-gold);
  outline-offset: 8px;
}

/* ————— balance —————
   Symbole de la profession, en trait doré sur l'aplat de la bannière. Tourne
   sur lui-même au défilement : --spin est posé par nav.js à partir de la
   position de la page.

   La rotation n'est ni une animation ni une transition CSS — la règle
   prefers-reduced-motion du site ne peut donc pas l'atteindre. C'est nav.js qui
   consulte cette préférence et s'abstient de faire tourner le symbole le cas
   échéant : une rotation liée au défilement est un déclencheur connu de
   vertige. Le trait reste alors simplement immobile. */
.mb-scales {
  --spin: 0deg;
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 26px;
  color: var(--mb-gold);
  transform: rotate(var(--spin));
  will-change: transform;
}

/* ————— liste cochée —————
   La coche est tracée en CSS — deux bords et une rotation — et non écrite au
   clavier : le caractère ✓ manque à Cormorant Garamond comme à Instrument Sans, et le
   navigateur irait le chercher dans une police de secours, d'un dessin étranger
   au reste de la page.

   Elle est décorative : c'est <ul>/<li> qui porte la structure, annoncée comme
   telle par les lecteurs d'écran. L'or donne 4,81:1 sur l'aplat bordeaux et
   3,21:1 sur le papier — suffisant pour un ornement, insuffisant s'il portait
   une information, ce qui n'est pas le cas ici.

   Le texte n'a pas de couleur propre : il hérite de son contexte, clair sur
   l'aplat sombre, encre sur le papier. */
.mb-checklist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  max-width: var(--mb-measure);
}
.mb-checklist li {
  position: relative;
  padding-left: 27px;
  margin-top: 11px;
  line-height: 1.6;
}
/* Variante appuyée : corps plus grand, coche plus large, respiration accrue.
   Pour une liste qui doit se lire d'un coup d'œil plutôt qu'accompagner un
   paragraphe. */
.mb-checklist--large li {
  font-size: 1.0312rem;
  line-height: 1.65;
  margin-top: 16px;
  padding-left: 32px;
}
.mb-checklist--large li::before {
  width: 13px;
  height: 7px;
  border-width: 2.2px;
  top: 0.46em;
}
/* Variante discrète : la liste accompagne un texte au lieu de le relayer. Posée
   sous le chapeau d'accueil, où elle suit deux phrases déjà composées au corps
   du chapeau — au corps courant elle leur ferait concurrence. */
.mb-checklist--petit li {
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: 9px;
  padding-left: 24px;
}
.mb-checklist--petit li::before {
  width: 9px;
  height: 5px;
  border-width: 1.8px;
  top: 0.44em;
}

.mb-checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--mb-gold);
  border-bottom: 2px solid var(--mb-gold);
  transform: rotate(-45deg);
}

/* ————— phrase en exergue, registre contemporain —————
   L'inverse de .mb-quote : linéale plutôt qu'empattements, romain plutôt
   qu'italique, filet horizontal court au-dessus plutôt que barre verticale à
   gauche. La mesure est large — la phrase tient en deux ou trois lignes au lieu
   de cinq — et l'espace autour fait le travail que ferait ailleurs un cadre.
   Bordeaux sur papier : 10,61:1. */
.mb-statement {
  margin: 40px 0;
  max-width: 54ch;
  font-family: var(--mb-font-body);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  /* Romain, et non semi-gras : à ce corps, la phrase entière en gras se lisait
     comme un pavé. Le poids est réservé aux deux fragments qui portent
     l'engagement, marqués en <strong> dans la page. */
  font-weight: var(--mb-weight-display);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--mb-bordeaux-700);
}
.mb-statement::before {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin-bottom: 22px;
  background: var(--mb-gold);
}

/* ————— arcade de bannière —————
   Motif d'architecture posé à droite de l'en-tête des pages internes, pour que
   la bannière ne se termine pas sur un vide. Une arcade plutôt qu'une balance :
   elle répond au portrait, pris sous la galerie à colonnes d'un palais de
   justice, et évite le symbole attendu de la profession.

   Purement décorative — aucune information n'y est portée — d'où aria-hidden
   et une opacité qui la maintient à l'arrière-plan. Masquée sous 900 px, où la
   colonne de texte prend toute la largeur. */
.mb-hero--page--orne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.mb-arcade {
  width: clamp(150px, 17vw, 230px);
  height: auto;
  color: var(--mb-gold);
  opacity: 0.5;
  justify-self: end;
}
@media (max-width: 900px) {
  .mb-hero--page--orne { grid-template-columns: 1fr; }
  .mb-arcade { display: none; }
}

/* Titre d'usage à la suite du nom : composé plus petit et sans la graisse du
   nom, pour que la hiérarchie se lise — le nom d'abord, la qualité ensuite.
   L'unité em le fait suivre le corps du titre, donc son clamp : la proportion
   tient du téléphone au grand écran.

   Corps porté de 0,46 à 0,58 em le 31 août 2026, à la demande de l'avocate : la
   qualité doit se lire d'aussi loin que le nom. */
.mb-titre-usage {
  display: block;
  margin-top: 0.18em;
  font-size: 0.58em;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--mb-gold);
}

/* ————— label circulaire —————
   Un sceau plutôt qu'une citation : double anneau doré, texte en Cormorant
   centré. L'or n'y est employé qu'en trait, comme la charte l'exige, et le
   texte reste en bordeaux — 13,19:1 sur le papier.

   La taille suit celle du texte : le cercle est dimensionné en em, de sorte
   qu'il ne se déforme pas si le visiteur agrandit les caractères. */
.mb-label {
  position: relative;
  display: grid;
  place-content: center;
  width: 10.6em;
  height: 10.6em;
  margin: 44px auto 0;
  padding: 1.2em;
  border-radius: 50%;
  border: 2.5px solid var(--mb-gold);
  text-align: center;
  font-family: var(--mb-font-display);
  font-size: 1.1875rem;
  font-weight: var(--mb-weight-ui);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--mb-bordeaux-900);
}
/* Second anneau, en retrait : c'est lui qui fait lire l'ensemble comme un
   cachet et non comme une simple pastille. */
.mb-label::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--mb-gold-rule);
}

/* ————— croquis d'audience —————
   Dessin détouré — encre et lavis — posé dans la colonne libre de la bannière,
   à la place qu'occupe l'arcade sur l'accueil. Détouré veut dire détouré : pas
   de planche, pas de cadre, la silhouette à même l'aplat bordeaux.

   Une planche claire avait d'abord été posée, sur la foi d'un calcul : 57 % des
   pixels du dessin tombent sous 1,6:1 contre le bordeaux, la robe noire devait
   s'y dissoudre. Composition faite, elle ne s'y dissout pas. Le calcul ignorait
   deux choses — le détourage laisse un liseré de papier blanc le long de chaque
   coup de pinceau, qui détache la silhouette à lui seul ; et la robe est d'un
   noir neutre quand l'aplat est un noir rouge, écart de teinte que l'œil lit
   même à luminance égale. D'où la règle, valable au-delà de ce dessin :
   **composer et regarder avant de conclure sur un rapport de contraste.**

   Écart assumé : la DA proscrit les images d'illustration. Un dessin au trait
   et au lavis n'est pas une photo d'illustration — même raisonnement que pour
   les trois glyphes de l'accueil — mais l'écart est réel et doit être signalé
   à la validation. */
.mb-croquis {
  justify-self: end;
  align-self: end;
  width: clamp(190px, 24vw, 290px);
  height: auto;
}
/* Sous 900 px la bannière repasse en une colonne : le dessin se centre sous le
   chapeau plutôt que de disparaître, contrairement à l'arcade — celle-ci est un
   ornement, celui-ci porte le sujet de la page. */
@media (max-width: 900px) {
  .mb-croquis {
    justify-self: center;
    width: clamp(180px, 52vw, 250px);
    margin-top: 30px;
  }
}

/* ————— mot encerclé —————
   Le pendant en ligne du tampon ci-dessus : un seul anneau, tracé autour d'un
   mot resté dans le fil de la phrase. C'est le geste de qui entoure un terme au
   crayon en relisant — d'où la légère bascule de l'ellipse, sans laquelle
   l'anneau se lit comme imprimé et non comme annoté.

   L'or n'y est, une fois de plus, qu'un trait : aucun aplat, aucune ombre. Le
   mot lui-même ne prend pas la couleur de l'anneau, il monte simplement d'un
   cran de clarté ; deux marques sur le même mot se neutraliseraient.

   Dimensionné en em : l'anneau grandit avec le texte. Purement décoratif, d'où
   le pseudo-élément plutôt qu'une balise — la phrase se lit à l'identique sans
   la feuille de style, et rien ne s'ajoute à l'énoncé d'un lecteur d'écran.

   À réserver à un seul mot, et à un seul par page : c'est sa rareté qui le
   fait remarquer. Au-delà d'un mot, l'ellipse s'allonge en ovale et le geste
   se perd. */
.mb-cercle {
  position: relative;
  display: inline-block;
  padding-inline: 0.34em;
  font-style: inherit;
  color: var(--mb-ink);
}
.mb-cercle::before {
  content: "";
  position: absolute;
  inset: -0.30em -0.02em -0.26em;
  border: 1.5px solid var(--mb-gold);
  border-radius: 50%;
  transform: rotate(-2.5deg);
  pointer-events: none;
}
/* Sur l'aplat, le mot passe au crème plein — même principe que .mb-dark strong :
   le corps du texte y est en crème adouci, l'accent reprend le crème entier. */
.mb-dark .mb-cercle { color: var(--mb-on-dark); }

/* ————— vignette ronde —————
   Petit cachet posé dans l'angle inférieur droit de la bannière : une coche et
   deux mots, pour signaler une pratique d'accueil sans en faire un argument
   commercial. La coche est tracée en CSS — deux bords et une rotation — car le
   caractère ✓ manque aux deux polices du site.

   L'or sur l'aplat donne 5,22:1 : c'est du texte porteur de sens, pas un
   ornement. Sur fond clair la vignette reprend le bordeaux, l'or n'y étant pas
   assez lisible.

   Sous 900 px elle quitte l'angle et rentre dans le flux, sous le chapeau :
   dans un coin, elle chevaucherait le texte. */
.mb-hero--page { position: relative; }
.mb-vignette {
  --vignette-fond: var(--mb-bg);
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 9.2em;
  height: 9.2em;
  padding: 0.6em;
  border-radius: 50%;
  border: 2px solid var(--mb-bordeaux-700);
  font-size: 0.625rem;
  font-weight: var(--mb-weight-ui);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: var(--mb-bordeaux-700);
}
/* La coche n'est plus tracée en bordures mais dessinée en SVG : un dégradé ne
   peut pas s'appliquer à une bordure, et c'est lui qui porte l'arc-en-ciel. Le
   tracé est décoratif — le sens est dans le texte, qui reste en or. */
.mb-vignette__coche {
  width: 1.4rem;
  height: auto;
  margin-bottom: 0.5em;
}
.mb-dark .mb-vignette {
  --vignette-fond: var(--mb-bordeaux-900);
  border-color: var(--mb-gold);
  color: var(--mb-gold);
}

/* Anneau arc-en-ciel. Une bordure CSS n'accepte pas de dégradé : on superpose
   deux fonds — le disque plein sur la boîte de remplissage, le dégradé conique
   sur la boîte de bordure — et la bordure devient transparente pour laisser
   voir le second. Le dégradé est conique, donc il tourne avec le cercle au lieu
   de le traverser.

   Le fond intérieur doit connaître son contexte, d'où --vignette-fond : sur
   l'aplat il vaut le bordeaux profond, sur le papier le crème. Sans cette
   variable, le centre du cercle serait un disque clair sur fond sombre.

   Encadré dans @supports : un navigateur qui ignore les dégradés coniques
   conserve l'anneau doré déclaré plus haut, au lieu d'une bordure invisible. */
@supports (background: conic-gradient(red, blue)) {
  /* .mb-dark .mb-vignette est plus spécifique et repose la bordure en or :
     il faut donc la neutraliser explicitement ici, sinon l'or opaque recouvre
     le dégradé et l'anneau reste doré sur l'aplat. */
  .mb-vignette,
  .mb-dark .mb-vignette {
    border: 3px solid transparent;
    background:
      linear-gradient(var(--vignette-fond), var(--vignette-fond)) padding-box,
      conic-gradient(from 90deg,
        #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787, #e40303) border-box;
  }
}
@media (max-width: 900px) {
  .mb-vignette {
    position: static;
    margin-top: 1.75rem;
  }
}

/* ————— fil d'Ariane ————— */

.mb-breadcrumb {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mb-on-dark-muted);
  padding-block: 18px 0;
}
.mb-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mb-breadcrumb li + li::before {
  content: '/';
  color: var(--mb-gold);
  margin-right: 10px;
}
.mb-breadcrumb a { color: var(--mb-on-dark-soft); text-underline-offset: 4px; }
.mb-breadcrumb [aria-current='page'] { color: var(--mb-on-dark); }

/* ————— questions fréquentes —————
   Question et réponse côte à côte, séparées par le filet. Le contenu reste
   déplié : c'est souvent par là qu'on arrive depuis un moteur de recherche. */

.mb-qa {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(20px, 3vw, 40px);
  padding-block: 28px;
  border-top: var(--mb-rule) solid var(--mb-divider);
  margin: 0;
}
.mb-qa:last-of-type { border-bottom: var(--mb-rule) solid var(--mb-divider); }
.mb-qa h3 { font-size: 1.3125rem; line-height: 1.2; }
.mb-qa p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .mb-qa { grid-template-columns: 1fr; gap: 12px; }
}

/* ————— renvoi vers les autres matières ————— */

.mb-siblings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--mb-rule) solid var(--mb-ink);
}
.mb-siblings li + li { border-left: var(--mb-rule) solid var(--mb-divider); }
.mb-siblings a {
  display: block;
  padding: 24px 26px 24px 0;
  font-family: var(--mb-font-display);
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--mb-ink);
  text-decoration: none;
}
.mb-siblings li + li a { padding-left: 26px; }
.mb-siblings a:hover { color: var(--mb-bordeaux-700); text-decoration: underline; text-underline-offset: 6px; }
.mb-siblings .mb-num { display: block; margin-bottom: 10px; }

@media (max-width: 640px) {
  .mb-siblings li + li { border-left: 0; border-top: var(--mb-rule) solid var(--mb-divider); }
  .mb-siblings li + li a { padding-left: 0; }
}

/* ————— pied de page ————— */

.mb-footer {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  align-items: baseline;
  padding-block: 34px 56px;
  font-size: 0.75rem;
  color: var(--mb-ink-muted);
  border-top: var(--mb-rule) solid var(--mb-divider);
}
/* ————— logotype —————
   Le logotype réel du cabinet, en PNG à fond transparent. Sa transparence a été
   extraite du fichier fourni, dont le fond était blanc opaque : l'encre étant
   monochrome (#3d0000), l'alpha se déduit exactement du canal vert, ce qui
   évite tout halo sur les bords adoucis.

   Deux fichiers, l'encre d'un PNG ne se recolorant pas : logo-mb.png pour le
   papier, logo-mb-clair.png pour les aplats bordeaux. 190 px est la largeur en
   deçà de laquelle la dernière ligne du logotype cesse d'être lisible. */
.mb-logomark {
  display: block;
  width: 190px;
  height: auto;
}

.mb-footer__logo {
  font-family: var(--mb-font-display);
  font-size: 1rem;
  color: var(--mb-ink);
  margin-right: auto;
}
.mb-footer__logo::after { content: '.'; color: var(--mb-gold); }
.mb-footer a { color: inherit; text-decoration: none; }
.mb-footer a:hover { color: var(--mb-bordeaux-700); text-decoration: underline; }

/* Lien vers le profil professionnel. La marque LinkedIn est reprise en
   monochrome et hérite de la couleur du texte : la direction artistique tient
   sur deux encres, un bleu de marque y ferait une tache. */
.mb-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mb-footer__social svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ————— marqueur de texte provisoire —————
   Règle du projet : tout texte de remplissage est signalé comme tel, jamais
   présenté comme du contenu juridique validé. À retirer avant mise en ligne. */

.mb-draft {
  max-width: none; /* le bandeau traverse la page, il n'obéit pas à la mesure */
  margin: 0;
  background: var(--mb-bordeaux-100);
  border-block: var(--mb-rule) solid var(--mb-bordeaux-300);
  color: var(--mb-bordeaux-900);
  font-size: 0.7812rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 16px;
}
.mb-draft strong { font-weight: var(--mb-weight-ui); }

/* Valeur factuelle non encore fournie par le cabinet. */
.mb-todo {
  border-bottom: var(--mb-rule) dashed var(--mb-bordeaux-500);
  color: var(--mb-bordeaux-700);
  font-style: italic;
}
.mb-dark .mb-todo {
  color: var(--mb-gold);
  border-bottom-color: var(--mb-gold);
}