/* Écrans propres à Honoré Transfert : uniquement des tokens du design system, préfixe ht-. */

/* Écrans propres : l'en-tête, la navigation et le pied de page viennent de la coque hg-site (aucun CSS projet). */

/* Aperçu et publicité (réception) */
.ht-preview { width: 100%; height: 70vh; border: 1px solid var(--hg-border); border-radius: var(--hg-radius); background: var(--hg-surface); }
.ht-ad img { display: block; max-width: 100%; margin-inline: auto; border-radius: var(--hg-radius); }
.ht-eyebrow, .ht-center { text-align: center; }
.ht-eyebrow { margin-bottom: var(--hg-space-4); }
#receive-card .hg-state { margin: 0; padding: 0; }

/* Abeille Honoré devant fichiers et transferts */
.ht-bee { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--hg-radius); background: var(--hg-accent-soft); }
.ht-bee img { width: 80%; height: 80%; object-fit: contain; }
.ht-bee-img { width: 70%; height: 70%; object-fit: contain; }
.ht-list { list-style: none; margin: 0; padding: 0; }
.ht-narrow--wide { max-width: 48rem; margin-inline: auto; width: 100%; }

/* Accueil : titre, formulaire + illustration, étapes */
.ht-hero { font-size: var(--hg-fs-display); font-weight: var(--hg-fw-black); line-height: 1.1; letter-spacing: -.02em; }
.ht-hero em { font-style: normal; color: var(--hg-accent); }
.ht-work { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--hg-space-8); align-items: center; }
.ht-work > * { min-width: 0; }
.ht-art { position: relative; display: grid; place-items: center; min-height: 28rem; padding-bottom: var(--hg-space-12); }
.ht-art::before { content: ""; position: absolute; inset: 8% 6% 14%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hg-accent) 24%, transparent), transparent 70%); filter: blur(30px); pointer-events: none; }
.ht-art img { position: relative; width: 100%; max-height: 32rem; object-fit: contain; }
.ht-badges { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; margin: 0; padding: var(--hg-space-3) var(--hg-space-5); list-style: none; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-pill); background: var(--hg-surface); }
.ht-badges li { display: inline-flex; align-items: center; gap: var(--hg-space-2); font-size: var(--hg-fs-small); }
.ht-badges .hg-ico { color: var(--hg-accent); }
.ht-steps { display: flex; justify-content: center; gap: var(--hg-space-12); list-style: none; margin: var(--hg-space-10) 0 0; padding: 0; color: var(--hg-text-muted); font-size: var(--hg-fs-small); }
.ht-steps li { display: flex; align-items: center; gap: var(--hg-space-3); }
.ht-steps b { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--hg-surface-3); color: var(--hg-text); }
.ht-steps .is-current { color: var(--hg-text); }
.ht-steps .is-current b { background: var(--hg-accent); color: var(--hg-on-accent); }
@media (max-width: 1024px) {
  .ht-work { grid-template-columns: minmax(0, 1fr); gap: var(--hg-space-6); }
  .ht-art { min-height: 0; }
  .ht-art img { max-height: 22rem; }
}
@media (max-width: 760px) {
  .ht-art { display: none; }
  .ht-steps { gap: var(--hg-space-4); justify-content: space-between; }
  .ht-steps li { flex-direction: column; text-align: center; font-size: var(--hg-fs-xs); }
}

/* Une colonne de grille ne dépasse jamais son conteneur (noms de fichiers longs). */
main .hg-stack, main .hg-state, main .hg-files { grid-template-columns: minmax(0, 1fr); }
.hg-files li > div:not(.ht-bee) { flex: none; }
@media (max-width: 560px) {
  .hg-files li { flex-wrap: wrap; }
  .hg-files li > .hg-btn-group { flex: 1 0 100%; justify-content: flex-end; }
}

/* Tarifs : bascule mensuel / annuel sans JavaScript. */
.ht-plans { list-style: none; padding: 0; }
.ht-featured { border-color: var(--hg-accent); }
.ht-featured > .hg-badge { justify-self: start; }
.ht-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hg-space-2); }
.ht-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hg-space-2); align-content: start; flex: 1; font-size: var(--hg-fs-small); }
.ht-perks li { display: flex; gap: var(--hg-space-2); align-items: flex-start; }
.ht-perks .hg-ico { margin-top: .125rem; color: var(--hg-success); }
.ht-y { display: none; }
main:has(#bill-y:checked) .ht-y { display: block; }
main:has(#bill-y:checked) .ht-m { display: none; }
main:has(#bill-y:checked) .ht-price.ht-y { display: flex; }
#billing { grid-template-columns: repeat(2, max-content); }

/* Pages légales : documentation en cartes, sommaire à gauche. */
.ht-legal-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--hg-gutter); align-items: start; }
.ht-toc { position: sticky; top: calc(4.5rem + var(--hg-space-4)); }
.ht-toc ol { margin: var(--hg-space-2) 0 0; padding-left: 1.25rem; font-size: var(--hg-fs-small); display: grid; gap: var(--hg-space-2); }
.ht-toc a { text-decoration: none; }
.ht-toc a:hover { text-decoration: underline; }
.ht-section .hg-prose { max-width: none; font-size: var(--hg-fs-body); }
.ht-section .hg-prose > h2:first-child { margin-top: 0; }
.ht-legal h2 { scroll-margin-top: calc(4.5rem + var(--hg-space-6)); }
.ht-legal .hg-prose { max-width: none; }
@media (max-width: 900px) {
  .ht-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .ht-toc { position: static; }
}

/* Pas de défilement de la page derrière une fenêtre modale. */
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }

/* Bloc « Nouveau transfert » : même mise en forme que le formulaire d'Honoré Secret (carte claire sur fond sombre). */
.ht-badge { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--hg-accent-soft); color: var(--hg-text); }
.ht-badge .hg-ico { width: 1.2rem; height: 1.2rem; }
.ht-form .hg-label { font-size: var(--hg-fs-body); gap: var(--hg-space-3); }
.ht-form .hg-input, .ht-form .hg-select { min-height: 3.2rem; }
.ht-form .hg-textarea { min-height: 7rem; }
.ht-form .hg-tab { font-size: var(--hg-fs-body); }
.ht-cta { min-height: 4.2rem; font-size: 1.1rem; border-radius: var(--hg-radius-lg); gap: var(--hg-space-3); }