@charset "UTF-8";
/* Honoré Catalogue : compléments de mise en page propres au site vitrine.
   Préfixe hc-, uniquement des tokens --hg-* (aucune couleur, police ni rayon en dur).
   Tout le reste vient du design system (public/hg/). */

/* Ancres : le titre de section n'est pas masqué par l'en-tête collant */
.hc-section, #bientot { scroll-margin-top: calc(var(--hg-topbar-h) + var(--hg-space-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Titres de section */
.hc-head { display: grid; gap: var(--hg-space-3); max-width: 46rem; }
.hc-eyebrow { margin: 0; font-size: var(--hg-fs-small); font-weight: var(--hg-fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--hg-text-muted); }
.hc-h2 { font-size: var(--hg-fs-title); font-weight: var(--hg-fw-black); line-height: var(--hg-lh-tight); letter-spacing: -.01em; }
.hc-h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hg-space-3); margin-top: var(--hg-space-4); font-size: var(--hg-fs-h2); }
.hc-kicker { margin: 0; font-size: var(--hg-fs-small); color: var(--hg-text-muted); }
.hc-kicker__link { color: var(--hg-text); font-weight: var(--hg-fw-semibold); text-decoration: underline; text-decoration-color: var(--hg-accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* Héros : capture réelle + abeille posée sur le coin */
.hc-hero-shot { position: relative; width: 100%; min-width: 0; margin: 0; display: grid; gap: var(--hg-space-3); }
.hc-hero-bee { position: absolute; top: calc(-1 * var(--hg-space-10)); right: calc(-1 * var(--hg-space-4)); width: 5.5rem; height: auto; pointer-events: none; }
@media (max-width: 39.99em) { .hc-hero-bee { width: 4rem; top: calc(-1 * var(--hg-space-8)); right: 0; } }

/* Captures d'écran */
.hc-shot { display: block; width: 100%; height: auto; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-lg); box-shadow: var(--hg-shadow); background: var(--hg-surface); }
.hc-shot--phone { border-radius: var(--hg-radius-xl); }
.hc-figure { margin: 0; display: grid; gap: var(--hg-space-3); align-content: start; font-size: var(--hg-fs-small); }
.hc-figure__link { display: block; border-radius: var(--hg-radius-lg); }
.hc-figure__link:focus-visible { outline: 3px solid var(--hg-focus); outline-offset: 3px; }
.hc-phones { display: grid; gap: var(--hg-gutter); grid-template-columns: repeat(3, minmax(0, 17rem)); justify-content: center; }
@media (max-width: 39.99em) { .hc-phones { grid-template-columns: minmax(0, 17rem); } }

/* Étapes « Comment ça marche » */
.hc-steps { margin: 0; padding: 0; list-style: none; }
.hc-step { display: grid; gap: var(--hg-space-3); align-content: start; }
.hc-step__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--hg-radius-pill); background: var(--hg-surface-3); color: var(--hg-text); font-weight: var(--hg-fw-black); }
.hc-step:first-child .hc-step__num { background: var(--hg-accent); color: var(--hg-on-accent); }

/* Cartes : texte et listes */
.hg-card > p { margin: 0; }
.hg-card .hg-card__head + p { margin-top: var(--hg-space-3); }
.hc-soon { display: grid; gap: var(--hg-space-5); }
.hc-soon .hg-card { display: grid; gap: var(--hg-space-3); align-content: start; }
.hc-soon .hg-card .hg-card__head + p { margin-top: 0; }
.hc-soon .hg-badge { justify-self: start; }
.hc-list { margin: 0; padding-left: var(--hg-space-5); display: grid; gap: var(--hg-space-2); color: var(--hg-text-muted); }
.hg-card > .hc-price { margin: 0; margin-top: auto; padding-top: var(--hg-space-4); border-top: 1px solid var(--hg-border); font-size: var(--hg-fs-title); font-weight: var(--hg-fw-black); }
#tarifs .hg-card { display: flex; flex-direction: column; }

/* FAQ : largeur de lecture */
.hc-faq { max-width: var(--hg-site-text); }
.hc-faq .hg-accordion__body p { margin: 0; }

/* Contact */
.hc-contact { display: grid; gap: var(--hg-site-gap); align-items: start; }
@media (min-width: 64em) { .hc-contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.hc-contact > [hidden] { display: none; }
.hc-contact-bee { width: 8rem; height: auto; margin-top: var(--hg-space-4); }
@media (max-width: 63.99em) { .hc-contact-bee { display: none; } }
.hc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#form-erreur:empty { display: none; }

/* Pied de page : signature Honoré */
.hc-footer { row-gap: var(--hg-space-4); }
.hc-sign { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--hg-space-3); text-align: center; }
.hc-sign__bee { width: 2.75rem; height: auto; }
.hc-sign .hg-hand { font-size: var(--hg-fs-lead); color: var(--hg-text); }
.hc-sign a { text-decoration: underline; text-decoration-color: var(--hg-accent); text-decoration-thickness: 2px; }

/* Barre du haut : le bouton « Demander une démo » cède la place sur petit écran (il est repris dans le menu) */
@media (max-width: 899.98px) { .hc-bar-cta { display: none; } }

/* Relecture : ?relecture dans l'URL encadre les passages à valider (voir js/hc-site.js) */
.hc-relecture [data-a-valider] { outline: 2px dashed var(--hg-warning); outline-offset: var(--hg-space-3); border-radius: var(--hg-radius); }
.hc-relecture [data-a-valider]::before { content: "A valider : " attr(data-a-valider); justify-self: start; padding: var(--hg-space-1) var(--hg-space-3); border-radius: var(--hg-radius-pill); background: var(--hg-warning-soft); color: var(--hg-text); font-size: var(--hg-fs-small); font-weight: var(--hg-fw-semibold); }

/* Page légale */
.hc-legal h2 { font-size: var(--hg-fs-h2); }