/**
 * Bloc Hero — shokola_hero
 * Réf. maquette : _claude/shokola-hero-banners.html (HERO A→E).
 * Tokens (--ink, --paper, --cyan…) aliasés dans custom.css ; --ease défini en local.
 */
.shk-hero { --ease: cubic-bezier(.16, 1, .3, 1); position: relative; }

/* ---------- Boutons partagés ---------- */
.shk-hero__btn {
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500;
    font-size: .85rem; letter-spacing: .02em; padding: 15px 24px; border-radius: 2px;
    transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease);
}
.shk-hero__btn .ar { transition: transform .35s; }
.shk-hero__btn:hover .ar { transform: translateX(5px); }
.shk-hero__btn--solid { background: var(--ink); color: var(--paper); }
.shk-hero__btn--solid:hover { background: var(--magenta); }
.shk-hero__btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.shk-hero__btn--ghost:hover { border-color: var(--ink); }
.shk-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Repères d'imprimeur (croix) */
.shk-hero__reg { position: absolute; width: 22px; height: 22px; opacity: .5; z-index: 1; }
.shk-hero__reg::before, .shk-hero__reg::after { content: ""; position: absolute; background: var(--ink); }
.shk-hero__reg::before { left: 50%; top: 0; width: 1px; height: 100%; }
.shk-hero__reg::after { top: 50%; left: 0; height: 1px; width: 100%; }

/* Titre commun */
.shk-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--magenta); }

/* ══════════════ HERO A — Éditorial ══════════════ */
.shk-hero--a { min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: var(--paper); }
.shk-hero--a .shk-hero__grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask: radial-gradient(circle at 65% 40%, #000, transparent 75%); mask: radial-gradient(circle at 65% 40%, #000, transparent 75%);
}
.shk-hero--a .shk-hero__reg.tl { top: 34px; left: 34px; }
.shk-hero--a .shk-hero__reg.tr { top: 34px; right: 34px; }
.shk-hero--a .shk-hero__reg.br { bottom: 34px; right: 34px; }
.shk-hero--a .shk-hero__in { position: relative; z-index: 1; padding: 120px 0; }
.shk-hero--a .shk-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .76rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 26px;
    opacity: 0; animation: shkHeroRise .8s var(--ease) .05s forwards;
}
.shk-hero--a .shk-hero__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.shk-hero--a .shk-hero__title {
    font-weight: 800; letter-spacing: -.045em; line-height: .94; font-size: clamp(2.6rem, 7vw, 6rem); max-width: 15ch;
    opacity: 0; animation: shkHeroRise .9s var(--ease) .18s forwards;
}
.shk-hero--a .shk-hero__sub {
    font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 56ch; margin: 26px 0 32px;
    opacity: 0; animation: shkHeroRise 1s var(--ease) .4s forwards;
}
.shk-hero--a .shk-hero__cta { opacity: 0; animation: shkHeroRise 1s var(--ease) .55s forwards; }

/* ══════════════ HERO B — Split texte / visuel ══════════════ */
.shk-hero--b { position: relative; overflow: hidden; background: var(--paper); padding: clamp(110px, 14vh, 160px) 0 clamp(60px, 8vw, 90px); }
.shk-hero--b .shk-hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.shk-hero--b .shk-hero__eyebrow { font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.shk-hero--b .shk-hero__eyebrow--bracket::before { content: "[ "; }
.shk-hero--b .shk-hero__eyebrow--bracket::after { content: " ]"; }
.shk-hero--b .shk-hero__title { font-weight: 800; letter-spacing: -.04em; line-height: .98; font-size: clamp(2.2rem, 4.6vw, 4rem); margin: 18px 0 20px; }
.shk-hero--b .shk-hero__sub { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.62; color: var(--ink-2); max-width: 48ch; margin-bottom: 30px; }
.shk-hero--b .shk-hero__visual { position: relative; aspect-ratio: 5/4; }
.shk-hero--b .shk-hero__tile { position: absolute; border-radius: 5px; overflow: hidden; box-shadow: 0 30px 70px rgba(20, 21, 26, .16); transition: transform .3s var(--ease); }
.shk-hero--b .shk-hero__tile .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.shk-hero--b .shk-hero__tile.main { inset: 0; width: 78%; height: 88%; }
.shk-hero--b .shk-hero__tile.mini { right: 0; bottom: 0; width: 44%; height: 50%; animation: shkHeroFloat 7s ease-in-out infinite alternate; }
.shk-hero--b .shk-hero__reg.tile { top: 12px; left: 12px; width: 18px; height: 18px; z-index: 2; opacity: .7; mix-blend-mode: overlay; }
.shk-hero--b .shk-hero__reg.tile::before, .shk-hero--b .shk-hero__reg.tile::after { background: #fff; }
@media (max-width: 820px) {
    .shk-hero--b .shk-hero__in { grid-template-columns: 1fr; }
    .shk-hero--b .shk-hero__visual { order: -1; max-width: 460px; }
}

/* ══════════════ HERO C — Bannière pleine image ══════════════ */
.shk-hero--c { min-height: 66vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.shk-hero--c .shk-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; animation: shkHeroZoom 14s ease-out forwards; }
.shk-hero--c .shk-hero__reg { top: 22px; left: 22px; opacity: .55; }
.shk-hero--c .shk-hero__reg::before, .shk-hero--c .shk-hero__reg::after { background: #fff; }
.shk-hero--c .shk-hero__in { position: relative; z-index: 1; color: var(--paper); padding: 0 0 clamp(40px, 6vw, 72px); }
.shk-hero--c .shk-hero__in > * { opacity: 0; animation: shkHeroRise .9s var(--ease) forwards; }
.shk-hero--c .shk-hero__bread { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: rgba(251, 250, 246, .7); margin-bottom: 18px; animation-delay: .1s; }
.shk-hero--c .shk-hero__label { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); animation-delay: .2s; }
.shk-hero--c .shk-hero__title { font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: clamp(2.2rem, 5.5vw, 4.6rem); margin: 12px 0 16px; max-width: 18ch; animation-delay: .3s; }
.shk-hero--c .shk-hero__chips { display: flex; flex-wrap: wrap; gap: 9px; animation-delay: .45s; }
.shk-hero--c .shk-hero__chip { border: 1px solid rgba(251, 250, 246, .3); border-radius: 30px; padding: 7px 15px; font-family: var(--mono); font-size: .74rem; }

/* ══════════════ HERO D — Centré minimal ══════════════ */
.shk-hero--d { min-height: 80vh; display: grid; place-items: center; text-align: center; overflow: hidden; background: var(--paper); }
.shk-hero--d .shk-hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: 0; }
.shk-hero--d .shk-hero__blob.a { width: 44vw; height: 44vw; left: -8vw; top: -10vw; background: radial-gradient(circle, rgba(0, 159, 227, .5), transparent 70%); animation: shkHeroDrift 18s ease-in-out infinite alternate; }
.shk-hero--d .shk-hero__blob.b { width: 40vw; height: 40vw; right: -6vw; bottom: -12vw; background: radial-gradient(circle, rgba(230, 0, 126, .42), transparent 70%); animation: shkHeroDrift 22s ease-in-out infinite alternate-reverse; }
.shk-hero--d .shk-hero__in { position: relative; z-index: 1; padding: 120px var(--pad); }
.shk-hero--d .shk-hero__eyebrow { font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; animation: shkHeroRise .8s var(--ease) .1s forwards; }
.shk-hero--d .shk-hero__title { font-weight: 800; letter-spacing: -.045em; line-height: .98; font-size: clamp(2.6rem, 8vw, 6.5rem); margin: 18px auto; max-width: 14ch; opacity: 0; animation: shkHeroRise 1s var(--ease) .22s forwards; }
.shk-hero--d .shk-hero__sub { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 46ch; margin: 0 auto 32px; line-height: 1.6; opacity: 0; animation: shkHeroRise 1s var(--ease) .34s forwards; }
.shk-hero--d .shk-hero__cta { justify-content: center; opacity: 0; animation: shkHeroRise 1s var(--ease) .46s forwards; }
.shk-hero--d .shk-hero__dots { display: flex; gap: 9px; justify-content: center; margin-top: 36px; opacity: 0; animation: shkHeroRise 1s var(--ease) .58s forwards; }
.shk-hero--d .shk-hero__dots i { width: 9px; height: 9px; border-radius: 50%; }
.shk-hero--d .shk-hero__dots i:nth-child(1) { background: var(--cyan); }
.shk-hero--d .shk-hero__dots i:nth-child(2) { background: var(--magenta); }
.shk-hero--d .shk-hero__dots i:nth-child(3) { background: var(--yellow); }
.shk-hero--d .shk-hero__dots i:nth-child(4) { background: var(--ink); }

/* ══════════════ HERO E — Chiffres / agence ══════════════ */
.shk-hero--e { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: clamp(120px, 15vh, 170px) 0 clamp(50px, 7vw, 80px); }
.shk-hero--e .shk-hero__grid {
    position: absolute; inset: 0; z-index: 0; opacity: .16; pointer-events: none;
    background-image: linear-gradient(rgba(251, 250, 246, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 250, 246, .4) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask: radial-gradient(circle at 70% 30%, #000, transparent 72%); mask: radial-gradient(circle at 70% 30%, #000, transparent 72%);
}
.shk-hero--e .shk-hero__in { position: relative; z-index: 1; }
.shk-hero--e .shk-hero__eyebrow { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.shk-hero--e .shk-hero__title { font-weight: 800; letter-spacing: -.04em; line-height: .98; font-size: clamp(2.4rem, 6vw, 5.2rem); margin: 18px 0 clamp(40px, 6vw, 64px); max-width: 16ch; }
.shk-hero--e .shk-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 50px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid rgba(251, 250, 246, .18); }
.shk-hero--e .shk-hero__stat .n { font-weight: 800; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.04em; line-height: 1; }
.shk-hero--e .shk-hero__stat .n em { font-style: normal; color: var(--magenta); }
.shk-hero--e .shk-hero__stat .l { font-family: var(--mono); font-size: .74rem; color: rgba(251, 250, 246, .6); margin-top: 10px; max-width: 20ch; line-height: 1.4; }
@media (max-width: 760px) { .shk-hero--e .shk-hero__stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Animations ---------- */
@keyframes shkHeroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes shkHeroFloat { from { transform: translate(0, 0); } to { transform: translate(-12px, -16px); } }
@keyframes shkHeroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes shkHeroDrift { from { transform: translate(0, 0); } to { transform: translate(40px, 30px); } }
@media (prefers-reduced-motion: reduce) {
    .shk-hero *, .shk-hero__in > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}