/* ═══════════════════════════════════════════════════════════════
   FLORIN — le héros, composé comme une face de billet

   Une coupure ne met pas sa valeur dans une demi-colonne : elle
   l'imprime en pleine largeur, place la vignette gravée sur un
   côté, et aligne les mentions de garantie en bandeau au pied.
   Le héros suit exactement cet ordre :

     ① timbres         — mentions d'état, en haut à gauche
     ② valeur faciale  — le titre, PLEINE LARGEUR du cartouche
     ③ filet gravé
     ④ corps + vignette — accroche et boutons | l'objet-carte
     ⑤ bandeau         — quatre cases de mentions, pleine largeur

   La leçon de la version précédente : le titre était dimensionné
   en `vw` comme s'il occupait tout l'écran, mais vivait dans une
   colonne de 570 px. Il rendait à 143 px, débordait sur cinq
   lignes et repoussait la carte hors de l'écran. Ici il occupe
   toute la largeur, et --t-hero est calé pour que la plus longue
   traduction tienne encore sur une ligne.
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  padding-block: clamp(var(--s6), 4vw, var(--s9)) clamp(var(--s8), 6vw, var(--s11));
  overflow: hidden;
  isolation: isolate;
}

/* ① Timbres d'état */
.hero__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s5);
}

/* ② Valeur faciale */
.hero__title {
  font-family: var(--font-title);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.96;
  /* Le crénage passe par le jeton, jamais en dur : les blocs
     d'écriture le remettent à zéro pour l'arabe et les écritures d'Asie
     de l'Est. Une valeur figée ici collait les lettres liées de
     l'arabe et rognait les idéogrammes. */
  letter-spacing: var(--tr-title);
  /* Pas de `balance` : sur un titre de deux phrases voulues, il
     redistribue les mots et casse la coupure choisie. */
  text-wrap: initial;
}
/* Pas d'italique : une grotesque n'en a pas de digne de ce nom. La
   seconde phrase se distingue par la couleur. */
.hero__title em { font-style: normal; font-weight: inherit; color: var(--accent); }

/* Chaque phrase s'imprime en montant sous un masque. Le décalage
   vaut 102 % de la hauteur de la phrase — si elle passe sur deux
   lignes dans une langue plus longue, le masque suit toujours. */
.print-line { display: block; overflow: hidden; }
html[data-print] .print-line > span {
  display: block;
  transform: translateY(102%);
  animation: line-press var(--d-print) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 140ms);
}
@keyframes line-press { to { transform: translateY(0); } }

/* ③ Filet gravé, avec le numéro de série de la coupure à droite */
.hero__rule {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-block: clamp(var(--s5), 3vw, var(--s7));
}
.hero__rule::before {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(to right, var(--line), var(--line-accent));
}

/* ④ Corps + vignette */
.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(var(--s6), 4vw, var(--s9));
  align-items: center;
}
.hero__pitch { display: grid; gap: var(--s6); align-content: start; }

/* La vignette : la carte, sa rosette de fond et son sceau.
   La rosette est CONTENUE dans la vignette — la version précédente
   la laissait déborder de 832 px sur le viewport, ce qui salissait
   tout le côté droit de la page. */
.hero__vignette {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-block-size: 20rem;
}
/* `place-items: center` fait rétrécir l'enfant à son contenu. La scène
   n'a alors plus de largeur propre, et la carte — dimensionnée en
   `min(25rem, 100%)` — résout ce 100 % contre une largeur indéterminée
   et s'effondre à zéro. On lui rend une largeur explicite. */
.hero__vignette .card-stage { inline-size: 100%; }
.hero__rosette {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: min(34rem, 118%);
  aspect-ratio: 1;
  z-index: -1;
  color: var(--line-accent);
  opacity: 0.42;
  pointer-events: none;
}
.hero__seal {
  position: absolute;
  inset-block-end: -0.5rem;
  inset-inline-start: -1rem;
  --seal-size: 5.5rem;
  z-index: 2;
}

/* ⑤ Bandeau de mentions — les garanties au pied de la coupure */
.hero__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: clamp(var(--s7), 5vw, var(--s9));
  border-block: 1px solid var(--line);
}
.hero__specs > div {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-inline-end: var(--hair) solid var(--line-faint);
}
.hero__specs > div:last-child { border-inline-end: 0; }
.hero__specs dt {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hero__specs dd {
  margin-block-start: var(--s3);
  font-family: var(--font-title);
  font-size: var(--t-xl);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

@media (max-width: 68rem) {
  .hero__body { grid-template-columns: minmax(0, 1fr); }
  .hero__vignette { min-block-size: 0; margin-block-start: var(--s4); }
  .hero__seal { display: none; }
}
@media (max-width: 44rem) {
  .hero__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__specs > div:nth-child(2) { border-inline-end: 0; }
  .hero__specs > div:nth-child(-n+2) { border-block-end: var(--hair) solid var(--line-faint); }
}