/* ============================================================
   BELGIQUE SUR MESURE — feuille de style
   Direction : maison de couture (Didone, craie, fil rouge)
   croisée avec le dossier judiciaire (colonne étroite, marges,
   cotes de pièces). Aucune dépendance, aucun build.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Spectral:ital,wght@0,300;0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Palette */
  --drap:      #16181d;   /* drap de laine, presque noir bleuté */
  --drap-clair:#242832;
  --papier:    #e9e7e1;   /* papier de dossier */
  --papier-2:  #f2f0ec;
  --encre:     #1c1f26;
  --ardoise:   #565f6e;   /* texte secondaire */
  --craie:     #cfe0ef;   /* trait de craie de tailleur */
  --fil:       #a4102a;   /* fil de bâti rouge */
  --laiton:    #947f45;   /* épingle de laiton */

  /* Typo */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --corps:   "Spectral", "Iowan Old Style", Georgia, serif;
  --data:    "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --mesure: 34rem;         /* largeur de la colonne de texte */
  --large: 44rem;          /* blocs qui débordent : tableaux, grilles, mesures */
  --rail: 13rem;           /* rail de gauche */
}

/* ---------- Réinitialisation mesurée ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; }

/* ---------- Utilitaires ---------- */
.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--drap); color: var(--papier);
  padding: .6rem 1rem; z-index: 100; font-family: var(--data); font-size: .8rem;
}
.saut-contenu:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 2px solid var(--fil); outline-offset: 3px; }

.enveloppe { width: min(100% - 2.5rem, 62rem); margin-inline: auto; }

/* ---------- Bâti : le fil rouge cousu ---------- */
.bati {
  height: 2px; border: 0; margin: 3.5rem 0;
  background-image: repeating-linear-gradient(90deg,
    var(--fil) 0 14px, transparent 14px 26px);
  opacity: .75;
}
.bati--court { width: 5.5rem; margin: 1.4rem 0; }

/* ============================================================
   DRAP : bandeau de tête, tissé en rayure tennis
   ============================================================ */
.drap {
  background-color: var(--drap);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(207,224,239,.10) 0 1px,
      transparent 1px 34px);
  color: var(--papier);
  position: relative;
}
.drap::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background-image: repeating-linear-gradient(90deg,
    var(--fil) 0 14px, transparent 14px 26px);
}

/* Barre de navigation */
.entete { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  padding: 1.15rem 0 1.15rem; }
.griffe {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--papier); white-space: nowrap;
}
.griffe span { color: var(--fil); }
.nav { display: flex; flex-wrap: wrap; gap: .3rem 1.05rem; margin-left: auto; }
.nav a {
  font-family: var(--data); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: rgba(233,231,225,.66);
  padding-bottom: .2rem; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--papier); border-bottom-color: var(--fil); }
.nav a[aria-current="page"] { color: var(--craie); border-bottom-color: var(--fil); }

/* ---------- L'étiquette cousue dans la doublure (signature) ---------- */
.etiquette-zone { padding: 4.5rem 0 5rem; }
@media (min-width: 64rem) {
  .etiquette-zone {
    display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    gap: 0 3.5rem; align-items: end;
  }
  .etiquette-zone .chapeau { margin-top: 0; padding-bottom: .4rem; }
}
.etiquette {
  --w: 28rem;
  width: min(100%, var(--w));
  border: 1px solid rgba(207,224,239,.32);
  padding: 1.9rem 1.9rem 1.6rem;
  position: relative;
  background: rgba(0,0,0,.18);
}
.etiquette::before, .etiquette::after {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--laiton); box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;
}
.etiquette::before { top: -4.5px; left: 2.2rem; }
.etiquette::after  { top: -4.5px; right: 2.2rem; }
.etiquette__maison {
  font-family: var(--data); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--craie); opacity: .75; margin: 0 0 1.1rem;
}
.etiquette__nom {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(2.6rem, 8vw, 4rem); line-height: .95; margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.etiquette__sous {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .22em;
  font-size: .8rem; margin: 0 0 1.6rem; color: var(--craie);
}
.etiquette dl { margin: 0; font-size: .92rem; }
.etiquette dt {
  font-family: var(--data); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(207,224,239,.55); margin-top: .85rem;
}
.etiquette dd { margin: .15rem 0 0; color: var(--papier); }
.etiquette dd em { font-style: italic; color: var(--craie); }

/* Chalk : le trait de craie qui se trace */
.craie-trait { display: block; margin: 2.2rem 0 0; }
.craie-trait path {
  fill: none; stroke: var(--craie); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: tracer 2.4s cubic-bezier(.7,0,.3,1) .4s forwards;
  opacity: .8;
}
@keyframes tracer { to { stroke-dashoffset: 0; } }

.chapeau {
  max-width: var(--mesure); margin: 2.6rem 0 0;
  font-size: 1.15rem; line-height: 1.6; color: rgba(233,231,225,.86);
}
.chapeau strong { color: var(--papier); font-weight: 600; }

/* ============================================================
   CORPS DE PAGE
   ============================================================ */
main { padding: 3.5rem 0 1rem; }

.dossier {
  display: grid; gap: 0 3.5rem;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 60rem) {
  .dossier { grid-template-columns: 1fr; }
}

/* Rail : cote du chef d'accusation + sommaire collant */
.rail { position: sticky; top: 1.5rem; }
@media (max-width: 60rem) { .rail { position: static; margin-bottom: 2.5rem; } }
.cote {
  font-family: var(--data); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fil); margin: 0 0 .5rem;
}
.rail__titre {
  font-family: var(--data); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ardoise);
  border-bottom: 1px solid rgba(28,31,38,.18); padding-bottom: .5rem; margin: 0 0 .8rem;
}
.sommaire { list-style: none; margin: 0; padding: 0; }
.sommaire li { margin: 0 0 .5rem; }
.sommaire a {
  font-size: .84rem; text-decoration: none; color: var(--ardoise);
  border-left: 2px solid transparent; padding-left: .6rem; display: block; line-height: 1.35;
  transition: color .2s, border-color .2s;
}
.sommaire a:hover { color: var(--encre); }
.sommaire a.actif { color: var(--encre); border-left-color: var(--fil); }

/* Colonne de texte */
.texte { max-width: var(--mesure); }
.texte > * { max-width: var(--mesure); }
.texte > .chefs,
.texte > .compteur,
.texte > .table-enveloppe,
.texte > figure.mesure-item { max-width: var(--large); }
.texte p { margin: 0 0 1.15rem; }
.texte p.exergue {
  font-family: var(--display); font-size: 1.35rem; line-height: 1.45; font-style: italic;
  margin: 2rem 0; color: var(--drap);
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }
h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1.05; margin: .2rem 0 1.4rem;
}
h2 {
  font-size: clamp(1.5rem, 3.4vw, 1.95rem); line-height: 1.15;
  margin: 3.2rem 0 1rem; scroll-margin-top: 1.5rem;
}
h2::before {
  content: ""; display: block; width: 3.2rem; height: 2px; margin-bottom: .9rem;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 10px, transparent 10px 18px);
}
h3 {
  font-size: 1.12rem; font-weight: 700; margin: 2rem 0 .6rem; letter-spacing: 0;
}
.surtitre {
  font-family: var(--data); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fil); margin: 0 0 .9rem;
}

/* Lien dans le texte */
.texte a, .bloc a, footer a { color: var(--encre); text-decoration-color: var(--fil);
  text-underline-offset: .18em; text-decoration-thickness: 1px; }
.texte a:hover { background: rgba(164,16,42,.08); }

/* ---------- LE MÈTRE-RUBAN (élément signature) ---------- */
.mesure-item { margin: 2.2rem 0; max-width: var(--large); }
.mesure-item__haut {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--data); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ardoise); margin-bottom: .45rem;
}
.mesure-item__val {
  font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--drap);
  letter-spacing: -.02em; text-transform: none; white-space: nowrap;
}
.mesure-item__val small { font-size: .95rem; letter-spacing: .02em; }
.ruban {
  position: relative; height: 30px;
  background: linear-gradient(180deg, #ddd8cb, #cfc9b9);
  border: 1px solid rgba(28,31,38,.22);
}
.ruban::before {
  content: ""; position: absolute; inset: 0; overflow: hidden;
  background-image:
    repeating-linear-gradient(90deg, rgba(28,31,38,.55) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(28,31,38,.75) 0 1px, transparent 1px 50px);
  background-size: 100% 9px, 100% 16px;
  background-repeat: no-repeat; background-position: 0 0, 0 0;
}
.ruban__epingle {
  position: absolute; top: -2px; bottom: -2px; left: var(--at, 50%);
  width: 2px; background: var(--fil);
  transform: scaleY(0); transform-origin: top; transition: transform .8s cubic-bezier(.6,0,.2,1);
}
.ruban__epingle::after {
  content: ""; position: absolute; top: -4px; left: -4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--fil);
}
.visible .ruban__epingle { transform: scaleY(1); }
.mesure-item__note { font-size: .85rem; color: var(--ardoise); margin: .5rem 0 0; }

/* ---------- Blocs de citation / articles de loi ---------- */
.article {
  border-left: 2px solid var(--drap); padding: .2rem 0 .2rem 1.2rem;
  margin: 1.8rem 0; font-family: var(--corps);
}
.article__ref {
  font-family: var(--data); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fil); display: block; margin-bottom: .4rem;
}
.article p { font-style: italic; margin: 0; font-size: 1.05rem; }

.constat {
  background: var(--papier-2); border: 1px solid rgba(28,31,38,.14);
  padding: 1.3rem 1.4rem; margin: 2rem 0;
}
.constat__t {
  font-family: var(--data); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ardoise); margin: 0 0 .6rem;
}
.constat p:last-child { margin-bottom: 0; }
.constat--reserve { border-left: 3px solid var(--laiton); }
.constat--defense { border-left: 3px solid var(--ardoise); }

/* ---------- Listes ---------- */
.texte ul, .texte ol { padding-left: 1.15rem; margin: 0 0 1.3rem; }
.texte li { margin-bottom: .55rem; }
.texte ul { list-style: none; padding-left: 0; }
.texte ul > li { padding-left: 1.35rem; position: relative; }
.texte ul > li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: .7rem; height: 1px; background: var(--fil);
}
ol.griefs { list-style: none; padding-left: 0; counter-reset: grief; }
ol.griefs > li { counter-increment: grief; padding-left: 2.6rem; position: relative; margin-bottom: 1.1rem; }
ol.griefs > li::before {
  content: counter(grief, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--data); font-size: .8rem; color: var(--fil); letter-spacing: .1em;
}

/* ---------- Tableaux ---------- */
.table-enveloppe { overflow-x: auto; margin: 2rem 0; max-width: var(--large); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
caption {
  text-align: left; font-family: var(--data); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ardoise); padding-bottom: .6rem;
}
th, td { text-align: left; padding: .55rem .8rem .55rem 0; border-bottom: 1px solid rgba(28,31,38,.13); vertical-align: top; }
thead th {
  font-family: var(--data); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ardoise); font-weight: 500; border-bottom-color: rgba(28,31,38,.35);
}
td.num, th.num { font-family: var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Grille des chefs (accueil) ---------- */
.chefs { display: grid; gap: 1px; background: rgba(28,31,38,.16); border: 1px solid rgba(28,31,38,.16); margin: 0; }
@media (min-width: 46rem) { .chefs { grid-template-columns: 1fr 1fr; } }
.chef {
  background: var(--papier); padding: 1.9rem 1.7rem 1.7rem; text-decoration: none; color: inherit;
  display: block; transition: background .25s;
}
.chef:hover, .chef:focus-visible { background: var(--papier-2); }
.chef__cote {
  font-family: var(--data); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fil); margin: 0 0 .7rem;
}
.chef h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .6rem; line-height: 1.15; }
.chef p { margin: 0 0 1rem; font-size: .95rem; color: var(--ardoise); }
.chef__lire {
  font-family: var(--data); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre); border-bottom: 1px solid var(--fil); padding-bottom: .15rem;
}

/* ---------- Compteur de dotation ---------- */
.compteur {
  background: var(--drap); color: var(--papier); padding: 2rem 1.8rem; margin: 2.5rem 0;
  background-image: repeating-linear-gradient(90deg, rgba(207,224,239,.08) 0 1px, transparent 1px 34px);
}
.compteur__t {
  font-family: var(--data); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--craie); margin: 0 0 .8rem;
}
.compteur__val {
  font-family: var(--display); font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1;
  font-variant-numeric: tabular-nums; margin: 0; letter-spacing: -.02em;
}
.compteur__note { font-size: .85rem; color: rgba(233,231,225,.7); margin: .9rem 0 0; max-width: 32rem; }
.texte .compteur a, .compteur a { color: var(--craie); text-decoration-color: var(--fil); }
.texte .compteur a:hover { background: rgba(207,224,239,.12); }

/* ---------- Navigation de fin de page ---------- */
.suite {
  display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between;
  border-top: 1px solid rgba(28,31,38,.18); margin-top: 4rem; padding-top: 1.4rem;
  font-family: var(--data); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.suite a { text-decoration: none; border-bottom: 1px solid var(--fil); padding-bottom: .2rem; }

/* ---------- Pied ---------- */
footer.pied {
  margin-top: 5rem; padding: 3rem 0 3.5rem;
  background: var(--drap); color: rgba(233,231,225,.72); font-size: .88rem;
  background-image: repeating-linear-gradient(90deg, rgba(207,224,239,.07) 0 1px, transparent 1px 34px);
}
footer.pied a { color: var(--craie); }
.pied__grille { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .pied__grille { grid-template-columns: 1.4fr 1fr; } }
.signature {
  border: 1px solid rgba(207,224,239,.28); padding: 1.4rem 1.5rem; max-width: 30rem;
}
.signature__nom {
  font-family: var(--display); font-style: italic; font-size: 1.55rem; color: var(--papier);
  margin: 0 0 .3rem;
}
.signature p { margin: .4rem 0 0; font-size: .82rem; line-height: 1.55; }
.pied__mentions { font-size: .78rem; line-height: 1.6; }

/* ---------- Révélation au défilement ---------- */
.reveler { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveler.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveler { opacity: 1; transform: none; } }

/* ---------- Impression ---------- */
@media print {
  .drap, .nav, .rail, .suite, .compteur { background: none !important; color: #000 !important; }
  body { background: #fff; font-size: 11pt; }
  .dossier { display: block; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}