/* blokka-shared.css — variables & composants communs à tous les blocs Blokka */

:root {
    --blokka-accent:    #D90429;
    --blokka-accent-2:  #EF233C;
    --blokka-bg:        #EDF2F4;
    --blokka-bg-alt:    #ffffff;
    --blokka-bg-dark:   #2B2D42;
    --blokka-fg:        #2B2D42;
    --blokka-fg-muted:  #8D99AE;
    --blokka-border:    #EDF2F4;
    --blokka-radius:    .5rem;
}

/* ── Eyebrow ── */
.blokka-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-family: "JetBrains Mono", "Courier New", monospace;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--blokka-fg-muted);
    padding: .35rem .75rem;
    border: 1px solid var(--blokka-border);
    border-radius: 999px;
    background: var(--blokka-bg-alt);
    margin-bottom: 1rem;
}

.blokka-eyebrow .dot {
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--blokka-accent);
    flex-shrink: 0;
}

/* ── Stat card ── */
.blokka-stat-card {
    border: 1px solid var(--blokka-border);
    background: var(--blokka-bg-alt);
    border-radius: var(--blokka-radius);
    padding: 1.5rem;
}

.blokka-stat-value {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--blokka-accent);
}

.blokka-stat-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--blokka-fg-muted);
    margin-top: .5rem;
}

/* ── Icon block ── */
.blokka-icon-block {
    background: var(--blokka-bg-alt);
    border: 1px solid var(--blokka-border);
    border-radius: var(--blokka-radius);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blokka-icon-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .12);
    border-color: var(--blokka-accent);
}

.blokka-icon-wrap {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--blokka-radius);
    background: color-mix(in oklab, var(--blokka-accent) 12%, transparent);
    color: var(--blokka-accent);
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
}

/* ── Dark variant ── */
.blokka-bg-dark {
    background: var(--blokka-bg-dark);
    color: #fff;
}

.blokka-bg-dark .blokka-eyebrow {
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .15);
}

.blokka-bg-dark .blokka-icon-block {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
}

.blokka-bg-dark .blokka-icon-block:hover {
    border-color: var(--blokka-accent-2);
}

.blokka-bg-dark .blokka-icon-wrap {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ── Media frame ── */
.blokka-media-frame {
    border-radius: var(--blokka-radius);
    overflow: hidden;
    border: 1px solid var(--blokka-border);
    background: var(--blokka-bg-alt);
}

/* ── Video wrapper ── */
.blokka-video-wrapper {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--blokka-radius);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--blokka-border);
}

.blokka-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Scroll reveal ── */
.blokka-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}

.blokka-reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .blokka-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Bouton accent ── */
.blokka-btn {
    background-color: var(--blokka-accent, #D90429);
    border-color: var(--blokka-accent, #D90429);
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--blokka-radius, .5rem);
    transition: filter .2s ease, transform .15s ease;
}

.blokka-btn:hover,
.blokka-btn:focus {
    filter: brightness(1.12);
    color: #fff !important;
    transform: translateY(-1px);
}

.blokka-btn-wrap {
    margin-top: 1.75rem;
}

/* ── Common section padding ── */
.blokka-section {
    padding: 5rem 0;
}

@media (max-width: 767.98px) {
    .blokka-section { padding: 3rem 0; }
}