/* Hero d'accueil — maquette 4A « Clair + mot rotatif » (couleurs : variables de hh-header.css) */
.hh-hero {
    background: var(--hh-surface);
    color: var(--hh-ink);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    /* Plein écran sous le header : --hh-header-top = hauteur réelle du header non replié
       (posée par hh-header.js ; 97 px / 73 px en attendant), le bandeau suivant n'apparaît qu'au défilement */
    --hh-hero-top: var(--hh-header-top, 97px);
    display: flex;
    min-height: calc(100vh - var(--hh-hero-top));
    min-height: calc(100svh - var(--hh-hero-top));
}
.hh-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(28px, 6vh, 72px);
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: clamp(16px, 4vh, 48px) 56px clamp(24px, 6vh, 72px);
}
.hh-hero h1 {
    margin: 0;
    color: var(--hh-ink);
    font-weight: 900;
    font-size: clamp(2.75rem, min(11.6vw, 21vh), 12.5rem);
    line-height: .9;
    letter-spacing: -.065em;
    white-space: nowrap;
}
/* Mot rotatif : mots espacés de 1.9em (1em + 0.9em de vide). La boîte déborde de 0.45em en haut et
   0.3em en bas (marges négatives : mise en page inchangée) pour garder jambages et accents entiers ;
   en haut, un masque en dégradé efface progressivement le mot qui sort (pas de coupure nette). */
.hh-rot {
    display: inline-block;
    width: 4.2em;
    height: 1em;
    padding: .45em 0 .3em;
    margin: -.45em 0 -.3em;
    box-sizing: content-box;
    overflow: hidden;
    vertical-align: bottom;
    color: var(--hh-orange);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 .5em);
    mask-image: linear-gradient(to bottom, transparent 0, #000 .5em);
}
.hh-rot > span { display: flex; flex-direction: column; }
.hh-rot > span > span { display: block; height: 1em; line-height: 1em; margin-bottom: .9em; white-space: nowrap; }

.hh-hero-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: end;
}
.hh-hero-lead {
    margin: 0;
    max-width: 420px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--hh-muted);
}
.hh-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 16px 26px;
    border-radius: 9999px;
    background: var(--hh-orange);
    color: #fff !important;
    font: 600 16px/1.2 'Poppins', system-ui, sans-serif;
    text-decoration: none !important;
    transition: transform .3s ease, opacity .3s ease;
}
.hh-hero-cta:hover { transform: translateY(-2px); opacity: .92; }

.hh-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hh-tile {
    display: block;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: var(--hh-tile);
    color: var(--hh-ink) !important;
    text-decoration: none !important;
    transition: transform .3s ease, border-color .3s ease, background-color .4s ease, color .4s ease;
}
.hh-tile:hover { transform: translateY(-3px); border-color: var(--hh-orange); }
.hh-tile-label { font-size: 13px; opacity: .7; }
.hh-tile-price { margin-top: clamp(12px, 3vh, 28px); font: 900 34px/1.1 'Poppins', system-ui, sans-serif; letter-spacing: -.04em; }
.hh-tile-unit { font-size: 12px; opacity: .6; }
.hh-tile--accent { background: #0A2342; color: #fff !important; }
html.dark .hh-tile--accent, html[data-theme="dark"] .hh-tile--accent { background: var(--hh-orange); }

.hh-hero a:focus-visible { outline: 2px solid var(--hh-orange); outline-offset: 3px; }

@media (max-width: 1100px) {
    .hh-hero { --hh-hero-top: var(--hh-header-top, 73px); }
    .hh-hero-inner { padding-left: 32px; padding-right: 32px; }
    .hh-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
    .hh-hero-inner { padding-left: 16px; padding-right: 16px; gap: 28px; }
    .hh-tiles { grid-template-columns: repeat(2, 1fr); }
    .hh-tile-price { margin-top: 18px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .hh-tile, .hh-hero-cta { transition: none; }
}