/* ═══════════════════════════════════════════════════════════════════════════
   Kiality Vitrine — Design système
   Palette : #27b98a (vert principal) · #03120d (fond sombre)
   Style : sobre, flat, sans ombre portée marquée
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {
    --c-dark: #03120d;
    --c-dark-soft: #0c2519;
    --c-mid: #164d34;
    --c-primary: #27b98a;
    --c-primary-dark: #1d9470;
    --c-primary-light: #e6f8f2;
    --c-surface: #f5fbf8;
    --c-border: #c8e6d9;
    --c-text: #03120d;
    --c-muted: #4d7060;
    --c-white: #ffffff;
    --max-w: 1200px;
    --px: 2rem;
}

/* ─── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--c-text);
    background: var(--c-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
    margin: 0;
}

p {
    margin: 0;
}

a {
    color: var(--c-primary-dark);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.k-navbar {
    background: var(--c-dark);
    border-bottom: 1px solid var(--c-dark-soft);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
}

.k-navbar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.k-navbar-brand {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    flex-shrink: 0;
}

    .k-navbar-brand:hover {
        text-decoration: none;
        color: var(--c-primary);
    }

.k-navbar-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

    .k-navbar-links a {
        color: #8aada0;
        font-size: .875rem;
        font-weight: 500;
        transition: color .15s;
        text-decoration: none;
    }

        .k-navbar-links a:hover {
            color: var(--c-white);
            text-decoration: none;
        }

/* ─── CTA Button ─────────────────────────────────────────────────────────── */
.k-btn-cta {
    display: inline-block;
    background: var(--c-primary);
    color: var(--c-dark);
    padding: .5rem 1.1rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .2px;
    transition: background .15s, color .15s;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

    .k-btn-cta:hover {
        background: var(--c-primary-dark);
        color: var(--c-white);
        text-decoration: none;
    }

/* ─── Section helpers ────────────────────────────────────────────────────── */
.section-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 5rem var(--px);
}

.section-light {
    background: var(--c-surface);
}

.section-dark {
    background: var(--c-dark);
}

.section-mid {
    background: var(--c-dark-soft);
}

.section-white {
    background: var(--c-white);
}

.section-header {
    margin-bottom: 3rem;
}

.section-header--light {
    margin-bottom: 3rem;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-primary);
    margin-bottom: .6rem;
}

.section-eyebrow--light {
    color: var(--c-primary);
}

.section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--c-text);
    line-height: 1.2;
    margin-bottom: .75rem;
}

.section-title--light {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--c-white);
    line-height: 1.2;
    margin-bottom: .75rem;
}

.section-sub {
    color: var(--c-muted);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 580px;
    margin-bottom: .75rem;
}

.section-sub--light {
    color: #7aaa94;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 580px;
    margin: 0 auto .75rem;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    background: var(--c-dark);
    border-bottom: 1px solid var(--c-dark-soft);
}

.hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 6rem var(--px) 5rem;
    max-width: 780px;
    text-align: center;
}

.hero-eyebrow {
    display: inline-block;
    background: rgba(39,185,138,.12);
    color: var(--c-primary);
    border: 1px solid rgba(39,185,138,.28);
    border-radius: 3px;
    padding: .2rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    color: var(--c-white);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.hero-sub {
    color: #8aada0;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.hero-link {
    display: inline-block;
    padding: .5rem 1.1rem;
    color: #8aada0;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 3px;
    transition: color .15s, border-color .15s;
    text-decoration: none;
}

    .hero-link:hover {
        color: var(--c-white);
        border-color: rgba(255,255,255,.4);
        text-decoration: none;
    }

.hero-badges {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(39,185,138,.08);
    border: 1px solid rgba(39,185,138,.18);
    color: #8aada0;
    font-size: .75rem;
    font-weight: 500;
    padding: .3rem .7rem;
    border-radius: 3px;
}

    .hero-badge i {
        color: var(--c-primary);
    }

/* ─── Feature grid ───────────────────────────────────────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
}

.feature-cell {
    background: var(--c-white);
    padding: 2rem 1.75rem;
}

.feature-icon-wrap {
    width: 38px;
    height: 38px;
    background: var(--c-primary-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .875rem;
    color: var(--c-primary-dark);
    font-size: 1rem;
}

.feature-title {
    font-size: .9rem;
    color: var(--c-dark);
    margin-bottom: .4rem;
}

.feature-desc {
    font-size: .83rem;
    color: var(--c-muted);
    line-height: 1.6;
}

/* ─── Personas ───────────────────────────────────────────────────────────── */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.persona-card {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--c-mid);
    border-top: 3px solid var(--c-primary);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .0rem;
}

.persona-card--featured {
    background: rgba(39,185,138,.06);
    border-color: var(--c-primary);
}

.persona-avatar {
    width: 44px;
    height: 44px;
    background: rgba(39,185,138,.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}

.persona-role {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-primary);
    margin-bottom: .2rem;
}

.persona-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.persona-quote {
    font-size: .83rem;
    color: #7aaa94;
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 1.25rem;
    padding-left: .875rem;
    border-left: 2px solid var(--c-mid);
}

.persona-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .persona-benefits li {
        font-size: .82rem;
        color: #8aada0;
        padding: .3rem 0;
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        line-height: 1.4;
        border-bottom: 1px solid rgba(255,255,255,.04);
    }

        .persona-benefits li:last-child {
            border-bottom: none;
        }

        .persona-benefits li i {
            color: var(--c-primary);
            font-size: .8rem;
            margin-top: .15rem;
            flex-shrink: 0;
        }

/* ─── Hébergement ────────────────────────────────────────────────────────── */
.hosting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.hosting-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-primary);
    padding: 2rem;
}

.hosting-icon {
    width: 44px;
    height: 44px;
    background: var(--c-primary-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary-dark);
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}

.hosting-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-dark);
    margin-bottom: .5rem;
}

.hosting-desc {
    font-size: .83rem;
    color: var(--c-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.hosting-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hosting-tag {
    background: var(--c-primary-light);
    border: 1px solid var(--c-border);
    color: var(--c-primary-dark);
    font-size: .73rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 2px;
    letter-spacing: .3px;
}

/* ─── Tarifs ─────────────────────────────────────────────────────────────── */
.billing-note {
    display: inline-block;
    background: rgba(39,185,138,.08);
    border: 1px solid rgba(39,185,138,.22);
    border-radius: 3px;
    padding: .5rem 1rem;
    font-size: .83rem;
    color: #8aada0;
    margin-top: .5rem;
}

    .billing-note strong {
        color: #b0d6c8;
        font-weight: 600;
    }

.save-badge {
    display: inline-block;
    background: var(--c-primary);
    color: var(--c-dark);
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 2px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-left: .5rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(39,185,138,.15);
    border: 1px solid rgba(39,185,138,.2);
    margin-top: 2.5rem;
}

.pricing-card {
    background: var(--c-dark);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card--featured {
    background: rgba(39,185,138,.07);
}

.pricing-badge {
    display: inline-block;
    background: var(--c-primary);
    color: var(--c-dark);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 2px;
    margin-bottom: .875rem;
}

.pricing-tier {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: .2rem;
}

.pricing-tagline {
    font-size: .78rem;
    color: #98ada3;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex: 1;
}

    .pricing-features li {
        padding: .45rem 0;
        font-size: .83rem;
        color: #b1b5b4;
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        border-bottom: 1px solid rgba(255,255,255,.04);
        line-height: 1.4;
    }

        .pricing-features li:last-child {
            border-bottom: none;
        }

        .pricing-features li i.bi-check2 {
            color: var(--c-primary);
            flex-shrink: 0;
            margin-top: .1rem;
        }

        .pricing-features li i.bi-x {
            color: #808f88;
            flex-shrink: 0;
            margin-top: .1rem;
        }

.pricing-feature--off {
    color: #929d98 !important;
}

.pricing-btn {
    display: block;
    text-align: center;
    padding: .7rem 1rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: background .15s, color .15s;
    border: 1.5px solid var(--c-mid);
    color: #8aada0;
    margin-top: auto;
}

    .pricing-btn:hover {
        border-color: var(--c-primary);
        color: var(--c-primary);
        text-decoration: none;
    }

.pricing-btn-primary {
    display: block;
    text-align: center;
    padding: .7rem 1rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: background .15s, color .15s;
    background: var(--c-primary);
    color: var(--c-dark);
    border: none;
    margin-top: auto;
}

    .pricing-btn-primary:hover {
        background: var(--c-primary-dark);
        color: var(--c-white);
        text-decoration: none;
    }

/* ─── CTA bande ──────────────────────────────────────────────────────────── */
.cta-band {
    background: var(--c-primary);
}

.cta-band-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 4rem var(--px);
    text-align: center;
}

.cta-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--c-dark);
    margin-bottom: .75rem;
}

.cta-sub {
    color: var(--c-dark);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.cta-btn {
    display: inline-block;
    background: var(--c-dark);
    color: var(--c-white);
    padding: .75rem 2rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: .95rem;
    transition: background .15s;
    text-decoration: none;
}

    .cta-btn:hover {
        background: var(--c-dark-soft);
        color: var(--c-white);
        text-decoration: none;
    }

/* ─── Legal pages ───────────────────────────────────────────────────────── */
.legal-hero {
    background: var(--c-dark);
    border-bottom: 1px solid var(--c-dark-soft);
}

.legal-hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 3.5rem var(--px) 3rem;
}

.legal-hero-meta {
    color: #7aaa94;
    font-size: .82rem;
    margin-top: .6rem;
}

.legal-article {
    max-width: 780px;
}

.legal-article h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin-top: 2.25rem;
    margin-bottom: .6rem;
    padding-left: .75rem;
    border-left: 3px solid var(--c-primary);
}

.legal-article p {
    font-size: .9rem;
    color: var(--c-muted);
    line-height: 1.75;
    margin-top: .4rem;
}

.legal-article ul {
    padding-left: 1.25rem;
    margin-top: .5rem;
    margin-bottom: 0;
}

.legal-article li {
    font-size: .9rem;
    color: var(--c-muted);
    line-height: 1.75;
    margin-top: .25rem;
}

.legal-article strong {
    color: var(--c-text);
    font-weight: 600;
}

.legal-article a {
    color: var(--c-primary-dark);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.k-footer {
    background: var(--c-dark);
    border-top: 1px solid var(--c-dark-soft);
}

.k-footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 3.5rem var(--px) 0;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem 3rem;
}

.k-footer-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: .75rem;
    text-decoration: none;
}

    .k-footer-logo:hover {
        color: var(--c-primary);
        text-decoration: none;
    }

.k-footer-tagline {
    font-size: .8rem;
    color: #6a9180;
    line-height: 1.65;
    max-width: 240px;
}

.k-footer-col-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-primary);
    margin-bottom: .875rem;
}

.k-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.k-footer-brand-col {
    display: flex;
    flex-direction: column;
}

.k-footer-col a {
    font-size: .8rem;
    color: #6a9180;
    transition: color .15s;
    text-decoration: none;
    padding: .25rem 0;
}

    .k-footer-col a:hover {
        color: #8aada0;
        text-decoration: none;
    }

.k-footer-bottom {
    max-width: var(--max-w);
    margin: 2.5rem auto 0;
    border-top: 1px solid var(--c-dark-soft);
    padding: 1rem var(--px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.k-footer-legal {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

    .k-footer-legal a {
        font-size: .73rem;
        color: #6a9180;
        transition: color .15s;
        text-decoration: none;
    }

        .k-footer-legal a:hover {
            color: #6a9b84;
            text-decoration: none;
        }

.k-footer-copy {
    font-size: .73rem;
    color: #6a9180;
}

    .k-footer-copy a {
        color: var(--c-primary-dark);
    }

        .k-footer-copy a:hover {
            text-decoration: underline;
        }

/* ─── Formulaire Demande ─────────────────────────────────────────────────── */
.form-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    padding: 2.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.form-group--full {
    margin-bottom: 1.25rem;
}

.form-label-k {
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-dark);
    display: block;
}

.form-required {
    color: var(--c-primary-dark);
}

.form-control-k {
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: 3px;
    padding: .6rem .875rem;
    font-size: .9rem;
    color: var(--c-dark);
    background: var(--c-white);
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
    appearance: auto;
}

    .form-control-k:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(39,185,138,.12);
    }

textarea.form-control-k {
    resize: vertical;
}

.form-validation {
    font-size: .75rem;
    color: #c0392b;
}

.form-error-banner {
    background: #fdf3f2;
    border: 1px solid #f5c6c2;
    color: #7b2020;
    padding: .875rem 1rem;
    border-radius: 3px;
    font-size: .875rem;
    margin-bottom: 1.5rem;
}

.form-actions {
    margin-top: 1.75rem;
}

/* ─── Merci page ─────────────────────────────────────────────────────────── */
.merci-section {
    background: var(--c-surface);
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    padding: 4rem 0;
}

.merci-icon {
    width: 68px;
    height: 68px;
    background: var(--c-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--c-primary-dark);
    font-size: 1.75rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .persona-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hosting-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pricing-grid {
        grid-template-columns: 1fr 1fr;
    }

    .k-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .k-navbar-links {
        display: none;
    }

    .hero-inner {
        padding: 4rem var(--px) 3rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    :root {
        --px: 1.25rem;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .persona-grid {
        grid-template-columns: 1fr;
    }

    .hosting-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .k-footer-inner {
        grid-template-columns: 1fr 1fr;
        padding-top: 2.5rem;
    }

    .k-footer-brand-col {
        grid-column: 1 / -1;
    }

    .k-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .k-footer-legal {
        gap: .875rem;
    }

    .hero-inner {
        padding: 3rem var(--px) 2.5rem;
    }

    .section-inner {
        padding: 3.5rem var(--px);
    }

    .cta-band-inner {
        padding: 3rem var(--px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page Fonctionnalités
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── section-header light variant (sur fond sombre) ─────────────────────── */
.section-header-light .section-title,
.section-header-light .section-sub {
    color: var(--c-white);
}

/* ─── Cycle de vie ───────────────────────────────────────────────────────── */
.lifecycle-flow {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.lifecycle-step {
    flex: 1 1 200px;
    max-width: 240px;
    text-align: center;
    padding: 0 1rem;
}

.lifecycle-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
}

.lifecycle-step-num {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-primary-dark);
    margin-bottom: .4rem;
}

.lifecycle-step h3 {
    font-size: 1.05rem;
    margin-bottom: .5rem;
    color: var(--c-dark);
}

.lifecycle-step p {
    font-size: .9rem;
    color: var(--c-muted);
    line-height: 1.6;
}

.lifecycle-arrow {
    align-self: center;
    font-size: 1.5rem;
    color: var(--c-border);
    padding: 0 .25rem;
    margin-top: -2rem;
    flex-shrink: 0;
}

/* ─── Modes de contraintes ───────────────────────────────────────────────── */
.constraint-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.constraint-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 1.75rem;
    color: var(--c-white);
}

.constraint-card-featured {
    border-color: var(--c-primary);
    background: rgba(39,185,138,.08);
}

.constraint-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: var(--c-primary);
}

.constraint-badge {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: 4px;
}

.constraint-badge-conditions {
    background: rgba(39,185,138,.2);
    color: #7eebd0;
}

.constraint-badge-duckdb {
    background: rgba(99,102,241,.25);
    color: #a5b4fc;
}

.constraint-badge-nl {
    background: rgba(251,191,36,.2);
    color: #fde68a;
}

.constraint-card h3 {
    font-size: 1.05rem;
    margin-bottom: .6rem;
    color: var(--c-white);
}

.constraint-card p {
    font-size: .9rem;
    color: rgba(255,255,255,.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.constraint-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

    .constraint-list li {
        font-size: .88rem;
        color: rgba(255,255,255,.75);
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .constraint-list li i {
            color: var(--c-primary);
            flex-shrink: 0;
        }

.constraint-code {
    background: rgba(0,0,0,.35);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: .5rem;
}

    .constraint-code pre {
        margin: 0;
        font-size: .82rem;
        color: #7eebd0;
        font-family: 'Fira Code', 'Cascadia Code', monospace;
        line-height: 1.7;
        overflow-x: auto;
    }

/* ─── Screenshot placeholder ─────────────────────────────────────────────── */
.screenshot-wrapper {
    margin-top: 3rem;
}

.screenshot-placeholder {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}

.screenshot-placeholder-light {
    border-color: var(--c-border);
    background: var(--c-surface);
}

.screenshot-browser-bar {
    background: rgba(0,0,0,.3);
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.screenshot-browser-bar-light {
    background: #e8edf0;
    border-bottom-color: var(--c-border);
}

.browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}

.screenshot-browser-bar-light .browser-dot {
    background: #c0c8d0;
}

.browser-url {
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    margin-left: .5rem;
}

.screenshot-browser-bar-light .browser-url {
    color: var(--c-muted);
}

.screenshot-body {
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: rgba(255,255,255,.25);
}

    .screenshot-body i {
        font-size: 3rem;
    }

    .screenshot-body p {
        font-size: .88rem;
    }

.screenshot-body-light {
    color: var(--c-muted);
}

/* ─── Types de sources ───────────────────────────────────────────────────── */
.source-types-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}

.source-type-card {
    text-align: center;
    padding: 1.25rem .75rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-white);
}

.source-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto .6rem;
}

.source-type-label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--c-dark);
    margin-bottom: .25rem;
}

.source-type-examples {
    font-size: .75rem;
    color: var(--c-muted);
    line-height: 1.4;
}

/* ─── Fonctionnalités connecteur ─────────────────────────────────────────── */
.connector-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.connector-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

    .connector-feature > i {
        font-size: 1.4rem;
        color: var(--c-primary-dark);
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .connector-feature strong {
        display: block;
        margin-bottom: .3rem;
        font-size: .95rem;
        color: var(--c-dark);
    }

    .connector-feature p {
        font-size: .88rem;
        color: var(--c-muted);
        line-height: 1.6;
    }

/* ─── Split features (évaluation / anomalies) ────────────────────────────── */
.feat-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.feat-split-reverse {
    direction: rtl;
}

    .feat-split-reverse > * {
        direction: ltr;
    }

.feat-split-text .section-eyebrow {
    display: block;
    margin-bottom: .25rem;
}

.feat-split-text .section-title {
    color: var(--c-white);
}

.feat-split-text .section-sub {
    color: rgba(255,255,255,.7);
}

.feat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

    .feat-list li {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        font-size: .92rem;
        color: rgba(255,255,255,.8);
    }

        .feat-list li i {
            color: var(--c-primary);
            flex-shrink: 0;
            font-size: 1rem;
            margin-top: .1rem;
        }

/* Feat-list sur fond clair */
.section-light .feat-list li {
    color: var(--c-dark);
}

.section-light .feat-split-text .section-title {
    color: var(--c-dark);
}

.section-light .feat-split-text .section-sub {
    color: var(--c-muted);
}

/* ─── Statuts anomalie ───────────────────────────────────────────────────── */
.anomaly-statuses {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.anomaly-status {
    padding: .3rem .8rem;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
}

.status-open    { background: #fee2e2; color: #b91c1c; }
.status-progress { background: #fef3c7; color: #92400e; }
.status-review  { background: #dbeafe; color: #1d4ed8; }
.status-closed  { background: #dcfce7; color: #15803d; }

/* ─── Hub de normes ──────────────────────────────────────────────────────── */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.hub-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 2rem;
    color: var(--c-white);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

    .hub-card h3 {
        font-size: 1.05rem;
        color: var(--c-white);
    }

    .hub-card p {
        font-size: .9rem;
        color: rgba(255,255,255,.7);
        line-height: 1.6;
        flex: 1;
    }

.hub-card-meta {
    font-size: .78rem !important;
    color: rgba(255,255,255,.35) !important;
}

/* ─── Responsive Fonctionnalités ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .source-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .constraint-modes,
    .hub-grid,
    .connector-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .feat-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .feat-split-reverse {
        direction: ltr;
    }
}

@media (max-width: 768px) {
    .lifecycle-flow {
        flex-direction: column;
        align-items: center;
    }

    .lifecycle-arrow {
        transform: rotate(90deg);
        margin: 0;
    }

    .source-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .constraint-modes,
    .hub-grid,
    .connector-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .source-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .anomaly-statuses {
        gap: .5rem;
    }
}