/* =========================================================================
   Kaï Consulting — Design System v2 — COMPONENTS
   Best practices 2026 :
   - Container queries (cards adaptatives selon parent, pas viewport)
   - :has() pour les états parents (form valid, nav active)
   - <details>/<dialog> natifs stylés
   - Glass effect via backdrop-filter
   - Logical properties (margin-inline, padding-block)
   ========================================================================= */

/* =========================================================================
   1. HEADER — sticky avec glass effect + theme toggle
   ========================================================================= */

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: var(--surface-glass);
    border-block-end: 1px solid var(--border);
    transition: background var(--duration-snappy) var(--ease-out);
    /* NB : backdrop-filter NOT applied here — it would create a containing
       block for position:fixed descendants (mobile menu overlay). Moved to
       ::before pseudo-element below to keep the glass effect without
       breaking the mobile menu positioning. */
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    pointer-events: none;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding-block: var(--sp-4);
    min-height: 72px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
}

.site-logo:hover {
    color: var(--fg);
}

.site-logo-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--r-squircle);
    background: var(--brand);
    color: var(--brand-contrast);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 17px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* =========================================================================
   2. NAVIGATION PRIMAIRE — avec section active via :has() ou scrollspy
   ========================================================================= */

.primary-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.primary-nav-list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.primary-nav-link {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--fg-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border-radius: var(--r-md);
    transition: var(--transition-snappy);
    position: relative;
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible {
    color: var(--fg);
    background: var(--surface-hover);
}

/* État actif via aria-current ou .is-active */
.primary-nav-link[aria-current="page"],
.primary-nav-link.is-active {
    color: var(--brand);
    background: var(--brand-soft);
}

/* CTA dans la nav (dernier item) */
.primary-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--brand);
    color: var(--brand-contrast);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: var(--r-full);
    transition: var(--transition-snappy);
    box-shadow: var(--s-sm);
}

.primary-nav-cta:hover,
.primary-nav-cta:focus-visible {
    background: var(--brand-hover);
    color: var(--brand-contrast);
    transform: translateY(-1px);
    box-shadow: var(--s-md);
}

/* Mobile menu burger */
.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    align-items: center;
    justify-content: center;
    color: var(--fg);
    cursor: pointer;
    transition: var(--transition-snappy);
}

.nav-toggle:hover {
    background: var(--surface-hover);
}

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }

    /* Mobile menu : hidden by default, displayed as overlay when open.
       Use display:none rather than transform for bulletproof hiding. */
    .primary-nav {
        display: none;
        position: fixed;
        top: 72px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-modal, 50);
        background: var(--bg);
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
        padding: var(--sp-7) var(--space-gutter);
        overflow-y: auto;
        animation: nav-slide-in var(--duration-fluid, 280ms) var(--ease-out, ease-out);
    }

    .primary-nav[data-open="true"] {
        display: flex;
    }

    @keyframes nav-slide-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Lock body scroll when menu open — handled by JS via .nav-open on <body> */
    body.nav-open {
        overflow: hidden;
    }

    .primary-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
        width: 100%;
    }

    .primary-nav-link {
        padding: var(--sp-4);
        font-size: var(--text-lg);
        border-radius: var(--r-md);
    }

    .primary-nav-cta {
        margin-block-start: var(--sp-4);
        justify-content: center;
        padding: var(--sp-4);
        font-size: var(--text-lg);
    }

    /* Burger icon morphing to X when open */
    .nav-toggle[aria-expanded="true"] svg line:nth-child(1) {
        transform: translate(0, 6px) rotate(45deg);
        transform-origin: center;
    }
    .nav-toggle[aria-expanded="true"] svg line:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle[aria-expanded="true"] svg line:nth-child(3) {
        transform: translate(0, -6px) rotate(-45deg);
        transform-origin: center;
    }
    .nav-toggle svg line {
        transition: transform 200ms ease, opacity 150ms ease;
    }
}

/* =========================================================================
   3. THEME TOGGLE — sun ↔ moon avec animation
   ========================================================================= */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
    transition: var(--transition-snappy);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--brand);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform var(--duration-fluid) var(--ease-spring);
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

/* Affichage conditionnel des icônes selon le thème */
:root[data-theme="light"] .theme-toggle .icon-light,
:root[data-theme="dark"] .theme-toggle .icon-dark { display: none; }
:root:not([data-theme]) .theme-toggle .icon-light { display: none; }

/* =========================================================================
   4. BOUTONS — primary / ghost / soft / secondary / sizes
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    line-height: 1.2;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-snappy);
    min-height: 40px;
    white-space: nowrap;
    user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tailles */
.btn-sm  { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); min-height: 32px; }
.btn-lg  { padding: var(--sp-4) var(--sp-6); font-size: var(--text-base); min-height: 48px; }
.btn-xl  { padding: var(--sp-5) var(--sp-7); font-size: var(--text-lg); min-height: 56px; }

/* Variantes */
.btn-primary {
    background: var(--brand);
    color: var(--brand-contrast);
    box-shadow: var(--s-brand), inset 0 1px 0 color-mix(in oklch, white 15%, transparent);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--brand-hover);
    color: var(--brand-contrast);
    transform: translateY(-1px);
    box-shadow: var(--s-brand-lg), inset 0 1px 0 color-mix(in oklch, white 15%, transparent);
}
.btn-primary:active {
    transform: translateY(0);
    background: var(--brand-active);
}

.btn-secondary {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--border-strong);
    box-shadow: var(--s-xs);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--surface-hover);
    border-color: var(--fg-muted);
    color: var(--fg);
}

.btn-soft {
    background: var(--brand-soft);
    color: var(--brand);
}
.btn-soft:hover,
.btn-soft:focus-visible {
    background: var(--brand-soft-hover);
    color: var(--brand);
}

.btn-ghost {
    background: transparent;
    color: var(--fg);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--surface-hover);
    color: var(--fg);
}

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover { background: color-mix(in oklch, var(--danger) 90%, black); color: white; }

.btn-link {
    background: transparent;
    color: var(--brand);
    padding-inline: 0;
    min-height: auto;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-color: color-mix(in oklch, var(--brand) 40%, transparent);
}
.btn-link:hover {
    background: transparent;
    text-decoration-color: var(--brand);
}

/* Loading state */
.btn[data-loading="true"] {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
.btn[data-loading="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--r-full);
    color: var(--brand-contrast);
    animation: btn-spin 0.8s linear infinite;
}
.btn-secondary[data-loading="true"]::after,
.btn-soft[data-loading="true"]::after,
.btn-ghost[data-loading="true"]::after {
    color: var(--brand);
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Icônes dans les boutons */
.btn svg {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

/* =========================================================================
   5. FORMS — input, textarea, select, validation via :has()
   ========================================================================= */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.form-label .form-required {
    color: var(--danger);
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--fg-subtle);
    line-height: var(--leading-snug);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--fg);
    transition: var(--transition-snappy);
    min-height: 44px;  /* tactile-friendly */
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--fg-subtle);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
    border-color: var(--fg-muted);
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring-brand);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: var(--leading-normal);
}

/* Select avec chevron custom */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-inline-end: 44px;
    cursor: pointer;
}

/* Validation states — via :has() pour styler le parent */
.form-field:has(.form-input:invalid:not(:placeholder-shown)) .form-input,
.form-field:has(.form-textarea:invalid:not(:placeholder-shown)) .form-textarea,
.form-field.is-invalid .form-input,
.form-field.is-invalid .form-textarea,
.form-field.is-invalid .form-select {
    border-color: var(--danger);
}

.form-field:has(.form-input:valid:not(:placeholder-shown):not(:focus)) .form-input,
.form-field.is-valid .form-input {
    border-color: var(--success);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--danger);
    line-height: var(--leading-snug);
}

/* Checkbox & radio custom */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--fg);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    transition: var(--transition-snappy);
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.form-check input[type="checkbox"] { border-radius: var(--r-xs); }
.form-check input[type="radio"]    { border-radius: var(--r-full); }

.form-check input:hover { border-color: var(--brand); }

.form-check input:checked {
    background: var(--brand);
    border-color: var(--brand);
}

.form-check input[type="checkbox"]:checked::after {
    content: '';
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

.form-check input[type="radio"]:checked::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: var(--r-full);
}

.form-check input:focus-visible { box-shadow: var(--ring-brand); }

/* Switch (toggle) */
.form-switch input {
    appearance: none;
    width: 40px;
    height: 22px;
    background: var(--border-strong);
    border-radius: var(--r-full);
    position: relative;
    cursor: pointer;
    transition: var(--transition-snappy);
    flex-shrink: 0;
}
.form-switch input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: var(--r-full);
    box-shadow: var(--s-sm);
    transition: var(--transition-snappy);
}
.form-switch input:checked {
    background: var(--brand);
}
.form-switch input:checked::after {
    transform: translateX(18px);
}

/* =========================================================================
   6. CARDS — container queries pour adaptation au parent
   ========================================================================= */

.card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    transition: var(--transition-fluid);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--s-md);
}

.card-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--sp-3);
}

.card-title {
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    margin-bottom: var(--sp-3);
}

.card-title a {
    color: var(--fg);
    text-decoration: none;
}
.card-title a:hover { color: var(--brand); }
.card-title a::after {
    content: '';
    position: absolute;
    inset: 0;     /* link englobant — toute la card clickable */
}

.card-desc {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--sp-4);
}

.card-footer {
    margin-block-start: auto;
    padding-block-start: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.card-meta {
    font-size: var(--text-xs);
    color: var(--fg-subtle);
}

/* Variantes container queries — la card s'adapte à son parent */
@container (min-width: 480px) {
    .card-title { font-size: var(--text-xl); }
    .card { padding: var(--sp-7); }
}

@container (min-width: 720px) {
    .card-title { font-size: var(--text-2xl); }
    .card { padding: var(--sp-9); }
}

/* Card avec accent latéral */
.card-accent {
    border-inline-start: 3px solid var(--brand);
}

/* Card élevée (premium) */
.card-elevated {
    box-shadow: var(--s-md);
    border-color: transparent;
}
.card-elevated:hover {
    box-shadow: var(--s-lg);
}

/* =========================================================================
   7. REFERENCE CARD — pour clients (Dior, Kuhn, etc.)
   ========================================================================= */

.reference-card {
    container-type: inline-size;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-7);
    transition: var(--transition-fluid);
}

.reference-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--s-md);
}

.reference-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.reference-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--fg);
    margin-bottom: var(--sp-1);
    letter-spacing: var(--tracking-tight);
}

.reference-meta {
    font-size: var(--text-xs);
    color: var(--fg-subtle);
    font-weight: var(--weight-medium);
}

.reference-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--r-full);
    white-space: nowrap;
}

.reference-desc {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--sp-5);
}

/* =========================================================================
   8. PROFILE CARD — fondateurs
   ========================================================================= */

.profile-card {
    container-type: inline-size;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-7);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-6);
    align-items: start;
    height: 100%;
}

.profile-monogram {
    width: 80px;
    height: 80px;
    border-radius: var(--r-squircle);
    background: var(--brand);
    color: var(--brand-contrast);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.profile-name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    margin-bottom: var(--sp-1);
    letter-spacing: var(--tracking-tight);
}

.profile-role {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    margin-bottom: var(--sp-4);
}

@container (max-width: 400px) {
    .profile-card { grid-template-columns: 1fr; }
}

/* =========================================================================
   9. TAGS / PILLS / BADGES
   ========================================================================= */

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    background: var(--surface-muted);
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--r-full);
    line-height: 1.4;
    white-space: nowrap;
    transition: var(--transition-snappy);
}

.tag-brand {
    background: var(--brand-soft);
    color: var(--brand);
}

.tag-outline {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--fg-muted);
}

.tag-success { background: color-mix(in oklch, var(--success) 15%, transparent); color: var(--success); }
.tag-warning { background: color-mix(in oklch, var(--warning) 15%, transparent); color: var(--warning); }
.tag-info    { background: color-mix(in oklch, var(--info) 15%, transparent); color: var(--info); }
.tag-danger  { background: color-mix(in oklch, var(--danger) 15%, transparent); color: var(--danger); }

/* Tag list — groupe de tags */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* =========================================================================
   10. FAQ — <details> stylé
   ========================================================================= */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: var(--transition-snappy);
}

.faq-item:has(> summary:hover) {
    border-color: var(--border-strong);
}

.faq-item[open] {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.faq-item > summary {
    padding: var(--sp-5) var(--sp-6);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--fg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    list-style: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ''; }

.faq-item > summary::after {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / contain no-repeat;
    transition: transform var(--duration-fluid) var(--ease-out);
}

.faq-item[open] > summary::after { transform: rotate(180deg); }
.faq-item[open] > summary { color: var(--brand); }

.faq-answer {
    padding: 0 var(--sp-6) var(--sp-5);
    font-size: var(--text-sm);
    color: var(--fg-muted);
    line-height: var(--leading-relaxed);
}

.faq-answer p { margin-block-end: var(--sp-3); }
.faq-answer p:last-child { margin-block-end: 0; }

/* =========================================================================
   11. CODE BLOCKS — avec header optionnel et bouton copy
   ========================================================================= */

.code-block {
    position: relative;
    background: var(--code-bg);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-block: var(--sp-5);
    border: 1px solid color-mix(in oklch, var(--code-fg) 10%, transparent);
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-5);
    background: color-mix(in oklch, var(--code-fg) 5%, transparent);
    border-block-end: 1px solid color-mix(in oklch, var(--code-fg) 10%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: color-mix(in oklch, var(--code-fg) 70%, transparent);
}

.code-block-lang {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--weight-semibold);
}

.code-block-copy {
    background: transparent;
    border: 1px solid color-mix(in oklch, var(--code-fg) 20%, transparent);
    color: color-mix(in oklch, var(--code-fg) 80%, transparent);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: var(--transition-snappy);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.code-block-copy:hover {
    background: color-mix(in oklch, var(--code-fg) 10%, transparent);
    color: var(--code-fg);
}

.code-block pre {
    margin: 0;
    background: transparent;
    border-radius: 0;
}

/* =========================================================================
   12. TABLES — comparaison technique responsive
   ========================================================================= */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-block: var(--sp-5);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    text-align: start;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-muted);
    color: var(--fg);
    font-weight: var(--weight-semibold);
    border-block-end: 1px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: var(--sp-4) var(--sp-5);
    color: var(--fg-muted);
    border-block-end: 1px solid var(--border);
    vertical-align: top;
}

.table tr:last-child td {
    border-block-end: none;
}

.table tbody tr {
    transition: background var(--duration-snappy) var(--ease-out);
}

.table tbody tr:hover {
    background: var(--surface-hover);
}

/* =========================================================================
   13. BREADCRUMB
   ========================================================================= */

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-xs);
    color: var(--fg-subtle);
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.breadcrumb li + li::before {
    content: '/';
    color: var(--fg-faint);
    margin-inline-end: var(--sp-1);
}

.breadcrumb a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: var(--transition-snappy);
}

.breadcrumb a:hover { color: var(--brand); }

.breadcrumb [aria-current="page"] {
    color: var(--fg);
    font-weight: var(--weight-medium);
}

/* =========================================================================
   14. FOOTER
   ========================================================================= */

.site-footer {
    padding-block: var(--sp-10);
    background: var(--surface-muted);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
}

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer-nav a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: var(--transition-snappy);
}

.site-footer-nav a:hover { color: var(--brand); }

/* =========================================================================
   15. STAT BLOCK — chiffres clés
   ========================================================================= */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.stat-cell {
    background: var(--surface);
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 3.5vw, 3.25rem);
    font-weight: var(--weight-light);
    color: var(--brand);
    line-height: 1;
    letter-spacing: var(--tracking-tighter);
}

/* Variante (rarement utilisée) : valeur dans la couleur de fg au lieu du brand */
.stat-value.is-neutral {
    color: var(--fg);
}

.stat-value-unit {
    font-size: 0.5em;
    opacity: 0.75;
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-normal);
    margin-inline-start: 0.1em;
}

.stat-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--fg-subtle);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* Variante "bare" — pas de grille avec bordures, juste des stats alignées */
.section-inverse .stat-grid,
.stat-grid-bare {
    background: transparent;
    border: none;
    gap: var(--sp-9);
}

.section-inverse .stat-cell,
.stat-grid-bare .stat-cell {
    background: transparent;
    padding: var(--sp-7) var(--sp-4);
    gap: var(--sp-4);
}

/* En dark inverse, accentuer le brand pour qu'il ressorte mieux */
.section-inverse {
    --brand: var(--kai-500);
}

/* =========================================================================
   16. CTA BLOCK — fin d'article / fin de section
   ========================================================================= */

.cta-block {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
    color: var(--brand-contrast);
    padding: var(--sp-10) var(--sp-7);
    border-radius: var(--r-xl);
    text-align: center;
    box-shadow: var(--s-brand-lg);
}

.cta-block h2 {
    color: var(--brand-contrast);
    margin-bottom: var(--sp-4);
}

.cta-block p {
    color: color-mix(in oklch, white 90%, transparent);
    font-size: var(--text-lg);
    max-width: 600px;
    margin-inline: auto;
    margin-block-end: var(--sp-6);
}

.cta-block .btn-primary {
    background: white;
    color: var(--brand);
    box-shadow: var(--s-md);
}

.cta-block .btn-primary:hover {
    background: var(--ink-50);
    color: var(--brand-hover);
    transform: translateY(-2px);
}

/* Mobile : éviter le débordement du bouton mailto long
   (ex: "recrutement@kai-consulting.fr" = 29 caractères).
   On rétrécit le padding du cta-block et on autorise le bouton
   à respirer/wrapper sans déborder du fond rouge. */
@media (max-width: 480px) {
    .cta-block {
        padding: var(--sp-8) var(--sp-5);
    }
    .cta-block .btn,
    .cta-block .btn-lg,
    .cta-block .btn-xl {
        max-width: 100%;
        padding-inline: var(--sp-4);
        font-size: var(--text-sm);
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* =========================================================================
   16b. TESTIMONIAL CARD — verbatim collaborateur / client
   ========================================================================= */

.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-7) var(--sp-7) var(--sp-6);
    max-width: 760px;
    margin-inline: auto;
    position: relative;
    box-shadow: var(--s-sm);
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: -0.25em;
    left: var(--sp-5);
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--brand);
    opacity: 0.35;
    pointer-events: none;
}

.testimonial-card blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--fg);
    font-style: italic;
}

.testimonial-card blockquote p + p {
    margin-block-start: var(--sp-4);
}

.testimonial-card figcaption {
    margin-block-start: var(--sp-5);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: normal;
}

.testimonial-card figcaption strong {
    color: var(--fg);
    font-weight: 600;
    display: block;
    margin-block-end: 2px;
}

/* =========================================================================
   17. ALERT / CALLOUT
   ========================================================================= */

.callout {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    background: var(--brand-soft);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--r-md);
    color: var(--fg);
    margin-block: var(--sp-5);
}

.callout-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--brand);
}

.callout-title {
    font-weight: var(--weight-semibold);
    margin-bottom: var(--sp-2);
}

.callout-info    { background: color-mix(in oklch, var(--info) 10%, transparent); border-color: var(--info); }
.callout-info .callout-icon { color: var(--info); }

.callout-warning { background: color-mix(in oklch, var(--warning) 12%, transparent); border-color: var(--warning); }
.callout-warning .callout-icon { color: var(--warning); }

.callout-success { background: color-mix(in oklch, var(--success) 10%, transparent); border-color: var(--success); }
.callout-success .callout-icon { color: var(--success); }

/* =========================================================================
   8. FILTER BAR — barre de filtres pour pages hub (articles, témoignages...)
   ========================================================================= */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block: var(--sp-8) var(--sp-7);
    padding-block-end: var(--sp-5);
    border-block-end: 1px solid var(--border);
}

.filter-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--fg-muted);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: var(--transition-snappy);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    line-height: 1.2;
}

.filter-btn:hover {
    border-color: var(--fg-muted);
    color: var(--fg);
}

.filter-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.filter-btn.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}

.filter-btn-count {
    font-size: 0.85em;
    opacity: 0.7;
    font-weight: var(--weight-regular);
}

.filter-btn.is-active .filter-btn-count {
    opacity: 0.85;
}

/* Cards filtrées : retire le rendu mais conserve l'animation stagger sur les visibles */
.card[hidden] { display: none !important; }

/* =========================================================================
   9. EMPTY STATE — state vide pour listings filtrés
   ========================================================================= */

.empty-state {
    text-align: center;
    padding-block: var(--sp-12);
    color: var(--fg-muted);
    border: 1px dashed var(--border);
    border-radius: var(--r-lg);
    margin-block-start: var(--sp-6);
}

.empty-state h3 {
    margin-block: 0 var(--sp-4);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
}

.empty-state p {
    max-width: 56ch;
    margin-inline: auto;
    margin-block: 0 var(--sp-3);
    line-height: var(--leading-relaxed);
}

.empty-state p:last-child { margin-block-end: 0; }