/**
 * apb-home-sections.css — 5 sections homepage (v2.30.0).
 *
 * Rendu par shortcode `[apb_home_sections]` (class-home-sections.php).
 * Vit après le hero Bricks (.apb-hero-section) sur post_id 25.
 *
 * Direction esthétique : "Belgian craft editorial" — navy chaud + beige cream +
 * amber, typo Inter/Fraunces via tokens, tape belge tri-color sur ancres.
 *
 * Sections :
 *   1. Categories grid (12 cat top + lien voir toutes)
 *   2. Comment ça marche (3 step + ligne ambre connectrice)
 *   3. Stats live (3 chiffres ou trust signals < 50 pros)
 *   4. Pourquoi Fixsalis (3 trust cards, plan featured navy)
 *   5. CTA final "Devenez pro" (card centrée, tape belge top)
 */

.apb-home-sections {
    font-family: var(--apb-sans, 'Inter', system-ui, sans-serif);
    color: var(--apb-ink, #0F172A);
    background: var(--apb-bg, #FAFAF7);
    width: 100%;
    overflow-x: clip;
}

.apb-home-sections * { box-sizing: border-box; }

.apb-hs {
    padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 56px);
    position: relative;
}

.apb-hs__inner {
    max-width: var(--apb-max-w, 1180px);
    margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════
   HEAD (eyebrow + title + lede)
   ════════════════════════════════════════════════════════════ */
.apb-hs__head {
    max-width: 720px;
    margin-bottom: clamp(36px, 5vw, 56px);
}
.apb-hs__head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.apb-hs__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--apb-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--apb-tracking-wide, 0.08em);
    text-transform: uppercase;
    color: var(--apb-accent-2, #E88B05);
    margin-bottom: 18px;
}
.apb-hs__eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--apb-accent, #F59E0B);
    flex-shrink: 0;
}
.apb-hs__head--center .apb-hs__eyebrow {
    justify-content: center;
}

.apb-hs__title {
    margin: 0 0 14px;
    font-family: var(--apb-display, var(--apb-sans));
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--apb-tracking-tight, -0.025em);
    color: var(--apb-ink, #0F172A);
    max-width: 22ch;
    text-wrap: balance;
}
.apb-hs__head--center .apb-hs__title {
    margin-inline: auto;
}

.apb-hs__lede {
    margin: 0;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.55;
    color: var(--apb-ink-2, #334155);
    max-width: 38em;
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.apb-hs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 26px;
    border-radius: var(--apb-radius-sm, 10px);
    font-family: var(--apb-sans);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    min-height: 52px;
    transition: transform var(--apb-dur, 220ms) var(--apb-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
                background var(--apb-dur-fast, 180ms),
                box-shadow var(--apb-dur, 220ms),
                color var(--apb-dur-fast, 180ms),
                border-color var(--apb-dur-fast, 180ms);
}
.apb-hs__btn svg {
    transition: transform var(--apb-dur-fast, 200ms);
}

.apb-hs__btn--primary {
    background: var(--apb-accent, #F59E0B);
    color: var(--apb-accent-ink, #1A1204);
    box-shadow: var(--apb-shadow-amber, 0 6px 16px rgba(245, 158, 11, 0.30));
}
.apb-hs__btn--primary:hover {
    background: var(--apb-accent-2, #E88B05);
    color: var(--apb-accent-ink, #1A1204);
    transform: translateY(-2px);
    box-shadow: var(--apb-shadow-amber-2, 0 12px 24px rgba(245, 158, 11, 0.40));
}
.apb-hs__btn--primary:hover svg { transform: translateX(3px); }

.apb-hs__btn--ghost {
    background: transparent;
    color: var(--apb-ink, #0F172A);
    border: 1.5px solid var(--apb-line-strong, #D4CCB8);
}
.apb-hs__btn--ghost:hover {
    border-color: var(--apb-brand, #0B2A4A);
    color: var(--apb-brand, #0B2A4A);
    background: var(--apb-brand-soft, #EEF2F8);
}
.apb-hs__btn--ghost:hover svg { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════
   1. CATEGORIES GRID
   ════════════════════════════════════════════════════════════ */
.apb-hs--categories {
    background: var(--apb-bg, #FAFAF7);
    border-top: 1px solid var(--apb-line, #E7E3D9);
}

.apb-hs__cat-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.apb-hs__cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 18px 16px;
    background: var(--apb-surface, #FFFFFF);
    border: 1px solid var(--apb-line, #E7E3D9);
    border-radius: var(--apb-radius-md, 14px);
    text-decoration: none;
    color: var(--apb-ink, #0F172A);
    transition: transform var(--apb-dur, 220ms) var(--apb-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--apb-dur, 220ms),
                border-color var(--apb-dur, 220ms);
    height: 100%;
}
.apb-hs__cat-card:hover {
    transform: translateY(-3px);
    border-color: var(--apb-brand, #0B2A4A);
    box-shadow: var(--apb-shadow-2);
    color: var(--apb-brand, #0B2A4A);
}

.apb-hs__cat-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--apb-radius-sm, 10px);
    background: var(--apb-bg-soft, #F4F2EC);
    font-size: 24px;
    line-height: 1;
}

.apb-hs__cat-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: inherit;
}

.apb-hs__cat-count {
    font-size: 12px;
    color: var(--apb-ink-3, #64748B);
    font-weight: 600;
    margin-top: auto;
}
.apb-hs__cat-count--empty {
    color: var(--apb-accent-2, #E88B05);
}

.apb-hs__cat-more {
    margin-top: clamp(24px, 3vw, 36px);
    display: flex;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   2. COMMENT ÇA MARCHE
   ════════════════════════════════════════════════════════════ */
.apb-hs--how {
    background: var(--apb-bg-soft, #F4F2EC);
    border-top: 1px solid var(--apb-line, #E7E3D9);
    border-bottom: 1px solid var(--apb-line, #E7E3D9);
    position: relative;
}
.apb-hs--how::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--apb-grain, none);
    background-size: 240px;
    opacity: 0.5;
    pointer-events: none;
}
.apb-hs--how > .apb-hs__inner { position: relative; }

.apb-hs__how-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    counter-reset: apb-how-step;
    position: relative;
}
@media (min-width: 720px) {
    .apb-hs__how-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    /* Ligne ambre qui connecte les 3 cards en desktop */
    .apb-hs__how-grid::before {
        content: '';
        position: absolute;
        top: 38px;
        left: 16%;
        right: 16%;
        height: 2px;
        background: repeating-linear-gradient(
            to right,
            var(--apb-accent, #F59E0B) 0 6px,
            transparent 6px 14px
        );
        opacity: 0.55;
        z-index: 0;
        pointer-events: none;
    }
}

.apb-hs__how-card {
    background: var(--apb-surface, #FFFFFF);
    border: 1px solid var(--apb-line, #E7E3D9);
    border-radius: var(--apb-radius-lg, 18px);
    padding: 28px 24px 26px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform var(--apb-dur, 220ms) var(--apb-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--apb-dur, 220ms);
}
.apb-hs__how-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--apb-shadow-2);
}

.apb-hs__how-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--apb-brand, #0B2A4A);
    color: var(--apb-ink-on-brand, #FFFFFF);
    font-family: var(--apb-display, var(--apb-sans));
    font-size: 18px;
    font-weight: 800;
    margin: 0 auto 14px;
    box-shadow: 0 6px 16px rgba(11, 42, 74, 0.22);
    position: relative;
    z-index: 2;
}

.apb-hs__how-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--apb-accent-2, #E88B05);
    margin-bottom: 14px;
}

.apb-hs__how-title {
    margin: 0 0 10px;
    font-family: var(--apb-display, var(--apb-sans));
    font-size: 20px;
    font-weight: 700;
    color: var(--apb-ink, #0F172A);
    letter-spacing: -0.012em;
}

.apb-hs__how-body {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--apb-ink-2, #334155);
}

/* ════════════════════════════════════════════════════════════
   3. STATS LIVE
   ════════════════════════════════════════════════════════════ */
.apb-hs--stats {
    background: var(--apb-bg, #FAFAF7);
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

.apb-hs__stats-card {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 32px 28px;
    background: var(--apb-surface, #FFFFFF);
    border: 1px solid var(--apb-line, #E7E3D9);
    border-radius: var(--apb-radius-lg, 20px);
    box-shadow: var(--apb-shadow-1);
    position: relative;
}
.apb-hs__stats-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 28px;
    width: 96px;
    height: 4px;
    background: var(--apb-tape, linear-gradient(to right, #0B2A4A 0%, #0B2A4A 33%, #F59E0B 33%, #F59E0B 66%, #EF3340 66%));
    border-radius: 0 0 4px 4px;
}
@media (min-width: 720px) {
    .apb-hs__stats-card {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 36px 36px;
    }
}

.apb-hs__stat {
    text-align: left;
    border-bottom: 1px solid var(--apb-line, #E7E3D9);
    padding-bottom: 18px;
}
.apb-hs__stat:last-child { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 720px) {
    .apb-hs__stat {
        border-bottom: 0;
        border-right: 1px solid var(--apb-line, #E7E3D9);
        padding-bottom: 0;
        padding-right: 24px;
    }
    .apb-hs__stat:last-child { border-right: 0; padding-right: 0; }
}

.apb-hs__stat-num {
    display: block;
    font-family: var(--apb-display, var(--apb-sans));
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    line-height: 1;
    color: var(--apb-brand, #0B2A4A);
    letter-spacing: var(--apb-tracking-display, -0.03em);
}
.apb-hs__stat-small {
    font-size: 0.55em;
    color: var(--apb-ink-3, #64748B);
    font-weight: 700;
    margin-left: 2px;
}

.apb-hs__stat-label {
    display: block;
    font-size: 14.5px;
    color: var(--apb-ink-2, #334155);
    margin-top: 8px;
    line-height: 1.4;
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   4. POURQUOI FIXSALIS
   ════════════════════════════════════════════════════════════ */
.apb-hs--why {
    background: var(--apb-bg, #FAFAF7);
    border-top: 1px solid var(--apb-line, #E7E3D9);
}

.apb-hs__why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px) {
    .apb-hs__why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.apb-hs__why-card {
    background: var(--apb-surface, #FFFFFF);
    border: 1px solid var(--apb-line, #E7E3D9);
    border-radius: var(--apb-radius-lg, 18px);
    padding: 32px 26px 28px;
    transition: transform var(--apb-dur, 220ms) var(--apb-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--apb-dur, 220ms),
                border-color var(--apb-dur, 220ms);
}
.apb-hs__why-card:hover {
    transform: translateY(-4px);
    border-color: var(--apb-line-strong, #D4CCB8);
    box-shadow: var(--apb-shadow-2);
}

.apb-hs__why-metric {
    display: inline-block;
    font-family: var(--apb-display, var(--apb-sans));
    font-size: 44px;
    font-weight: 800;
    color: var(--apb-brand, #0B2A4A);
    letter-spacing: var(--apb-tracking-display, -0.03em);
    line-height: 1;
    margin-bottom: 16px;
}
.apb-hs__why-card.is-accent .apb-hs__why-metric {
    color: var(--apb-accent-2, #E88B05);
}

.apb-hs__why-title {
    margin: 0 0 10px;
    font-family: var(--apb-display, var(--apb-sans));
    font-size: 20px;
    font-weight: 700;
    color: var(--apb-ink, #0F172A);
    letter-spacing: -0.012em;
    line-height: 1.3;
}

.apb-hs__why-body {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--apb-ink-2, #334155);
}

/* ════════════════════════════════════════════════════════════
   5. CTA FINAL "Devenez pro"
   ════════════════════════════════════════════════════════════ */
.apb-hs--cta {
    background: var(--apb-bg-soft, #F4F2EC);
    border-top: 1px solid var(--apb-line, #E7E3D9);
    text-align: center;
}

.apb-hs__cta-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--apb-surface, #FFFFFF);
    border: 1px solid var(--apb-line, #E7E3D9);
    border-radius: var(--apb-radius-xl, 24px);
    padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
    position: relative;
    box-shadow: var(--apb-shadow-2);
}
.apb-hs__cta-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    background: var(--apb-tape, linear-gradient(to right, #0B2A4A 0%, #0B2A4A 33%, #F59E0B 33%, #F59E0B 66%, #EF3340 66%));
    border-radius: 0 0 4px 4px;
}

.apb-hs__eyebrow--on-light {
    color: var(--apb-accent-2, #E88B05);
    justify-content: center;
}

.apb-hs__cta-title {
    margin: 0 0 14px;
    font-family: var(--apb-display, var(--apb-sans));
    font-size: clamp(26px, 3.6vw, 36px);
    font-weight: 800;
    color: var(--apb-ink, #0F172A);
    letter-spacing: var(--apb-tracking-tight, -0.025em);
    line-height: 1.15;
    max-width: 22ch;
    margin-inline: auto;
}

.apb-hs__cta-body {
    margin: 0 auto 28px;
    font-size: 17px;
    color: var(--apb-ink-2, #334155);
    max-width: 32em;
    line-height: 1.55;
}

.apb-hs__cta-assure {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-size: 14.5px;
    color: var(--apb-ink-2, #334155);
    font-weight: 500;
}
.apb-hs__cta-assure li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.apb-hs__cta-assure li::before {
    content: '✓';
    color: var(--apb-ok, #15803D);
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   Reveal animation (scroll-triggered via JS in apb-home-sections.js)
   ════════════════════════════════════════════════════════════ */
.apb-hs__reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--apb-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                transform 700ms var(--apb-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.apb-hs__reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .apb-home-sections *,
    .apb-home-sections *::before,
    .apb-home-sections *::after {
        animation: none !important;
        transition: none !important;
    }
    .apb-hs__reveal { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   Mobile spacing
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .apb-hs { padding-left: 16px; padding-right: 16px; }
    .apb-hs__cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .apb-hs__cat-card { padding: 16px 14px 14px; }
    .apb-hs__cat-emoji { width: 38px; height: 38px; font-size: 20px; }
    .apb-hs__cat-name { font-size: 14.5px; }
}