/* ==========================================================================
   Les articles. Chargée APRÈS /legal/legal.css, dont elle hérite tout.
   ==========================================================================

   🔴 AUCUN JETON ICI. legal.css porte la seule copie de jetons.css que les
      pages statiques peuvent lier, et web/test/legal.test.js la vérifie.
      Une deuxième copie serait une deuxième chance de dériver.

   🔴 MODE LECTURE, COMME LES PAGES LÉGALES : 65 caractères de mesure, un
      interligne généreux. Deux différences seulement, et elles sont voulues :
      chaque article ouvre sur un OBJET dessiné (décision du 11/09, « une page
      que du texte est pénible à voir »), et il se termine sur UN bouton, qui
      porte le seul orange de la page.
   ========================================================================== */

@font-face {
  font-family: 'Big Shoulders Display';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/polices/BigShouldersDisplay-ExtraBold.woff2') format('woff2');
}

/* --- L'objet de tête ------------------------------------------------------- */

.objet {
  margin: 0 0 var(--e-6);
  padding: var(--e-5) var(--e-4) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
}

.objet figcaption {
  margin-top: var(--e-4);
  font-size: 14px;
  line-height: 1.5;
  color: var(--encre-3);
}

.objet svg { display: block; width: 100%; height: auto; }

/* L'étiquette « exemple » : un chiffre inventé ne se montre jamais sans elle. */
.objet .exemple {
  display: inline-block;
  margin: 0 0 var(--e-3);
  padding: 2px 8px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-3);
}

/* La formule : la note comme position. */
.objet-formule-ligne {
  margin: 0 0 var(--e-4);
  font-size: clamp(26px, 8vw, 36px);
  color: var(--encre);
}

.objet-formule .courbe { fill: none; stroke: var(--encre-2); stroke-width: 1.5; }
.objet-formule .axe { stroke: var(--trait); stroke-width: 1; }
.objet-formule .milieu { stroke: var(--encre-3); stroke-width: 1; stroke-dasharray: 3 3; }
.objet-formule .graduation { fill: var(--encre-3); font: 9px var(--police-mono); }

/* Les huit poids : vides dans le HTML, remplis par vivant.js. */
.objet-poids ul { margin: 0; padding: 0; list-style: none; }

.objet-poids li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr 3.5rem;
  gap: var(--e-3);
  align-items: center;
  margin: 0;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--trait-doux);
  font-size: 15px;
}

.objet-poids li:last-child { border-bottom: 0; }
.objet-poids .nom { color: var(--encre); }

.objet-poids .piste {
  height: 6px;
  border-radius: 999px;
  background: var(--trait-doux);
  overflow: hidden;
}

/* scaleX et pas width : animer une largeur fait recalculer la page à chaque
   image, une échelle ne touche que le calque. */
.objet-poids .piste span {
  display: block;
  height: 100%;
  background: var(--encre-2);
  transform: scaleX(var(--part, 0));
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.2, 0, 0.1, 1);
}

.objet-poids .part { text-align: right; color: var(--encre-2); }

/* L'échelle : deux montants, sept barreaux, lue du bas vers le haut. */
.objet-paliers ol {
  margin: 0;
  padding: 0 var(--e-4);
  list-style: none;
  border-inline: 2px solid var(--trait);
}

.objet-paliers li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
  margin: 0;
  padding: var(--e-3) 0;
  border-top: 2px solid var(--trait);
}

.objet-paliers li:last-child { border-bottom: 2px solid var(--trait); }

/* Un nom de palier : un des quatre emplois de la police d'affiche, à 28 px. */
.objet-paliers .palier {
  font-family: 'Big Shoulders Display', 'Arial Narrow', var(--police-titre);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--encre);
}

.objet-paliers .bornes { font-size: 13px; color: var(--encre-3); }

/* Le maillage : les 468 vrais points d'un visage. */
.objet-maillage svg { max-width: 280px; margin-inline: auto; }
.objet-maillage circle { fill: var(--encre-2); }

/* Les deux validations et leur intervalle. */
.objet-intervalle ul { margin: 0; padding: 0; list-style: none; }

.objet-intervalle li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}

.objet-intervalle .jeu { font-size: 15px; color: var(--encre); }
.objet-intervalle .axe { stroke: var(--trait); stroke-width: 1; }
.objet-intervalle .plage { stroke: var(--encre-2); stroke-width: 3; stroke-linecap: round; }
.objet-intervalle .point { fill: var(--encre); }
.objet-intervalle .valeur { font-size: 14px; color: var(--encre-2); }

/* Un duel : le verdict d'un duel est un des quatre emplois de l'affiche.
   ⛔ Jamais en rouge : perdre un duel n'est pas une faute. */
.objet-duel .verdict {
  margin: 0;
  font-family: 'Big Shoulders Display', 'Arial Narrow', var(--police-titre);
  font-weight: 800;
  font-size: clamp(48px, 16vw, 72px);
  line-height: 1;
  color: var(--encre);
}

.objet-duel .votes { margin: var(--e-2) 0 0; font-size: 18px; color: var(--encre); }

/* L'échelle de notation du Verdict : 19 crans de 1 à 10. */
.objet-echelle ol {
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--trait);
}

.objet-echelle li {
  position: relative;
  height: 14px;
  margin: 0;
  border-left: 1px solid var(--trait);
}

.objet-echelle li.entier { height: 26px; border-left-color: var(--encre-3); }

.objet-echelle li span {
  position: absolute;
  top: -20px;
  left: 0;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--encre-2);
}

.objet-echelle .bornes {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  margin: var(--e-3) 0 0;
  font-size: 14px;
  color: var(--encre-2);
}

/* Ce qui reste, ce qui part : deux colonnes, un seul fait. */
.objet-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
}

.objet-colonnes figcaption { grid-column: 1 / -1; }

.objet .etiquette {
  margin: 0 0 var(--e-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.objet-colonnes .quoi { margin: 0; font-size: 20px; color: var(--encre); }

/* Deux mesures à quinze jours d'écart. */
.objet-rescan .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.objet-rescan .valeur { margin: 0; font-size: clamp(40px, 12vw, 56px); line-height: 1; color: var(--encre); }
.objet-rescan .ecart { margin: var(--e-3) 0 0; font-size: 18px; color: var(--encre); }

/* Le tableau des preuves : la pratique, et son verdict en chasse fixe. */
.objet-preuves ul { margin: 0; padding: 0; list-style: none; }

.objet-preuves li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-4);
  margin: 0;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--trait-doux);
  font-size: 15px;
}

.objet-preuves li:last-child { border-bottom: 0; }
.objet-preuves .quoi { color: var(--encre); }

.objet-preuves .verdict-preuve {
  flex-shrink: 0;
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-2);
}

/* --- Le sommaire ------------------------------------------------------------
   Une table des matières, pas une grille de cartes : un titre qui se lit, une
   ligne qui dit ce qu'il y a derrière, un filet entre deux. */

.sommaire { margin: 0; padding: 0; list-style: none; }

.sommaire li {
  margin: 0;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--trait);
}

.sommaire li:last-child { border-bottom: 1px solid var(--trait); }

.sommaire a {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  text-decoration: none;
}

.sommaire a:hover { text-decoration: underline; text-decoration-color: var(--repere); }
.sommaire p { margin: var(--e-1) 0 0; font-size: 15px; }

/* --- Le bouton de fin : le seul orange de la page -------------------------- */

.relance { margin: var(--e-7) 0 0; }

.relance .bouton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--e-5);
  border-radius: var(--rayon);
  background: var(--repere);
  color: var(--noir);
  font-weight: 600;
  text-decoration: none;
}

.relance .bouton:hover { filter: brightness(1.12); }

/* --- Les langues, en pied ---------------------------------------------------- */

.langues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
}

.langues a { text-decoration: none; }
.langues [aria-current] { color: var(--encre); }

/* --- Mouvement réduit : les barres se posent sans glisser. ------------------ */
@media (prefers-reduced-motion: reduce) {
  .objet-poids .piste span { transition: none; }
}