/* ==========================================================================
   tranche.css — le composant « tranche ».

   Une histoire est un volume d'une collection. Sur un rayon, on ne voit d'un
   volume que sa tranche : un rectangle étroit, son titre à la verticale, et
   rien d'autre. C'est la seule définition de ce composant dans le dépôt ;
   aucune variante n'en est recopiée ailleurs.

   MARKUP
     <button class="tranche" type="button" data-variante="defaut">
       <span class="tranche-titre">Le voyage de la goutte d'eau</span>
       <span class="tranche-etincelle" aria-hidden="true">✦</span>
     </button>

   UNE SEULE PROP — data-variante
     defaut       rien de plus
     catalogue    un filet terre-voile en pied
     fabrication  se remplit du bas vers le haut, piloté par
                  --tranche-progression (0% à 100%), sans titre

   PAS DE data-surface="scene" ICI, VOLONTAIREMENT. L'attribut rebasculerait
   --terre-voile sur sa variante sourde #4A2E1B, qui disparaîtrait sur le fond
   --scene de la tranche : le filet du catalogue doit rester lisible. La
   couleur claire du texte vient de --scene-encre, défini sur :root et donc
   disponible sans l'attribut.
   ========================================================================== */

.tranche {
  /* Durée du seul mouvement conservé sous prefers-reduced-motion. Propriété
     locale du composant : la progression est un fait, pas une décoration. */
  --tranche-remplissage-duree: 600ms;

  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 28px;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-8);

  inline-size: 28px;
  block-size: 100%;
  padding: var(--espace-8) 0;

  border: 0;
  border-radius: 2px;
  background: var(--scene);
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Le titre se lit de bas en haut. vertical-rl fait couler le texte de haut en
   bas ; la rotation le remet dans le sens d'une tranche de livre posée. */
.tranche-titre {
  flex: 1 1 auto;
  min-block-size: 0;

  writing-mode: vertical-rl;
  /* SANS CETTE LIGNE, « Le cycle de l’eau » s'écrit « Le cycle de l’ eau ».
     text-orientation: mixed, la valeur par défaut, suit UAX #50 : il couche
     le latin sur le flanc mais redresse les caractères dont l'orientation
     verticale Unicode vaut « upright ». L'apostrophe typographique U+2019 en
     fait partie, et une fois redressée elle consomme un em entier au lieu de
     son chasse propre — mesuré : 118 px contre 103 px sur ce titre, 17,84 px
     contre 3,14 px pour le seul glyphe.
     Ce n'est ni un défaut de Fraunces ni une ligature ni un crénage perdu :
     Inter et Georgia se comportent de même, et couper les ligatures ou le
     crénage ne change rien. sideways couche tout le run, ce qui est le bon
     traitement pour un titre latin. upright est à écarter, il empile chaque
     lettre et porte le même titre à 301 px.
     Les guillemets « », les chiffres et le trait d'union sont déjà couchés
     par mixed : leur rendu est identique dans les deux valeurs. */
  text-orientation: sideways;
  transform: rotate(180deg);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-family: var(--police-titre);
  font-weight: var(--titre-graisse);
  font-size: 14px;
  /* Fraunces est variable sur opsz. --titre-opsz vaut 96, calibré pour les
     grands titres ; à 14px, l'axe doit suivre la taille réelle. */
  font-variation-settings: 'opsz' 14;
  line-height: 1;
  letter-spacing: var(--titre-tracking);
  color: var(--scene-encre);              /* 15,07 sur --scene */
  transition: color var(--transition);
}

/* L'Étincelle, en pied de tranche. */
.tranche-etincelle {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
  color: var(--scene-encre);
  opacity: .7;
}

/* Au survol, seul le titre change : il passe au blanc franc. Rien ne bouge,
   rien ne grandit — aucune règle de transform ne doit apparaître ici. */
.tranche:hover .tranche-titre {
  color: var(--sur-accent);
}

.tranche:focus-visible {
  outline: 2px solid var(--terre);        /* 3,64 sur --creme-profond */
  outline-offset: 2px;
}

/* --- catalogue ----------------------------------------------------------- */

.tranche[data-variante='catalogue'] {
  border-block-end: 2px solid var(--terre-voile);
}

/* --- fabrication --------------------------------------------------------- */

/* La tranche est vide en haut et se remplit de --scene du bas vers le haut,
   au rythme de la progression réelle. Aucune amorce, aucune accélération :
   la barre ne raconte que ce qui est déjà fait. */
.tranche[data-variante='fabrication'] {
  background: transparent;
  cursor: default;
}

.tranche[data-variante='fabrication']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--tranche-progression, 0%);
  border-radius: inherit;
  background: var(--scene);
  transition: block-size var(--tranche-remplissage-duree) linear;
}

.tranche[data-variante='fabrication'] .tranche-titre {
  display: none;
}

/* --- mouvement ----------------------------------------------------------- */

/* Le remplissage reste : il porte une information. Tout le reste est
   instantané. */
@media (prefers-reduced-motion: reduce) {
  .tranche,
  .tranche-titre,
  .tranche-etincelle {
    transition-duration: 0s;
  }

  .tranche[data-variante='fabrication']::after {
    transition-duration: var(--tranche-remplissage-duree);
  }
}