/* ============================================================================
   REKOV — l'en-tête de section
   ----------------------------------------------------------------------------
   Remplace le marqueur numéroté. « 01 · Estimation » range la page en
   chapitres : c'est le tic des sites générés, et le numéro n'apprend rien —
   personne n'a besoin de savoir qu'il est au chapitre trois.

   À la place, la ligne d'en-tête d'une pièce de dossier : l'intitulé à gauche,
   un filet qui court, et à droite ce que la section CONTIENT. Le visiteur sait
   ce qui l'attend avant d'entrer — cinq causes, trois approches, six réponses
   — au lieu de savoir où il en est dans une numérotation qui ne le concerne
   pas.

   Le filet se trace de gauche à droite à l'entrée : c'est le même geste que
   les autres filets du site, porté ici par toute la largeur.
============================================================================ */

.marker {
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.8rem, 4vh, 3rem);
  padding-top: 0;
}
/* Le filet de tête du marqueur numéroté n'a plus lieu d'être : le filet de
   ligne le remplace, et deux filets se disputeraient la même fonction. */
.marker::before { content: none; }

.marker__label {
  font-family: var(--fm); font-weight: 400;
  font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap;
}
/* Le filet occupe tout l'espace disponible : c'est lui qui donne à l'en-tête
   sa pleine largeur, et il se trace comme les autres filets du site. */
.marker__rule {
  flex: 1 1 auto; height: 1px; background: var(--rule);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-io);
}
.no-js .marker__rule, .marker.is-drawn .marker__rule { transform: scaleX(1); }

/* Ce que la section contient. En terre claire : c'est une information, pas
   une décoration — et c'est le seul accent de l'en-tête. */
.marker__meta {
  font-family: var(--fm); font-weight: 400;
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}

@media (max-width: 560px) {
  /* Sur une ligne étroite, le filet n'a plus de place utile : les deux
     intitulés se répondent directement. */
  .marker__rule { min-width: 1.5rem; }
  .marker__label { font-size: 0.5rem; letter-spacing: 0.16em; }
}