/* Composants réutilisables Korum Secure. */
.korum-ui {
    --korum-ui-ink: #182333;
    --korum-ui-muted: #667085;
    --korum-ui-red: #ed1c24;
    --korum-ui-soft: #f6f8fa;
    --korum-ui-border: #dfe4ea;
    --korum-ui-success: #16834a;
    --korum-ui-warning: #9a6700;
    color: var(--korum-ui-ink);
}

.korum-demo-page {
    margin: 0 auto;
    max-width: 1240px;
    padding: 56px 24px 80px;
}

body.page-id-38227 #wp-content h1.title {
    display: none;
}

body.page-id-38227 .korum-demo-page {
    padding-top: 24px;
}

.korum-demo-hero {
    background: linear-gradient(120deg, #111b29, #253349);
    border-left: 7px solid var(--korum-ui-red);
    border-radius: var(--korum-radius-panel);
    color: #fff;
    padding: clamp(32px, 6vw, 68px);
}

.korum-eyebrow,
.korum-demo-kicker {
    color: var(--korum-ui-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.korum-demo-hero h1 {
    color: #fff;
    font-size: clamp(38px, 6vw, 68px);
    letter-spacing: -.035em;
    line-height: 1.05;
    margin: 0 0 18px;
}

.korum-demo-hero p:last-child {
    color: #dbe2eb;
    font-size: 18px;
    margin: 0;
    max-width: 760px;
}

.korum-demo-nav {
    background: #fff;
    border: 1px solid var(--korum-ui-border);
    border-radius: var(--korum-radius-panel);
    box-shadow: 0 8px 24px rgba(17, 32, 51, .07);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -18px auto 42px;
    max-width: calc(100% - 48px);
    padding: 8px;
    position: sticky;
    top: 12px;
    z-index: 5;
}

.korum-demo-nav a {
    border-radius: var(--korum-radius-control);
    color: var(--korum-ui-ink);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 13px;
}

.korum-demo-nav a:hover,
.korum-demo-nav a:focus-visible {
    background: var(--korum-ui-soft);
    color: var(--korum-ui-red);
}

.korum-demo-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.korum-demo-section {
    background: #fff;
    border: 1px solid var(--korum-ui-border);
    border-radius: var(--korum-radius-panel);
    padding: 36px;
}

.korum-demo-section h2 {
    font-size: 28px;
    letter-spacing: -.02em;
    margin: 0 0 24px;
}

.korum-demo-form-controls,
.korum-demo-typography {
    grid-column: 1 / -1;
}

.korum-type-sample h1,
.korum-type-sample h2,
.korum-type-sample h3,
.korum-type-sample h4 {
    margin: 0 0 14px;
}

.korum-type-sample p {
    color: var(--korum-ui-ink);
    font-size: 17px;
    max-width: 760px;
}

.korum-type-sample small {
    color: var(--korum-ui-muted);
}

.korum-swatches,
.korum-demo-card-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.korum-swatches > div {
    align-items: center;
    display: grid;
    gap: 2px 10px;
    grid-template-columns: 48px 1fr;
}

.korum-swatches span {
    border: 1px solid var(--korum-ui-border);
    border-radius: var(--korum-radius-control);
    grid-row: 1 / 3;
    height: 48px;
}

.korum-swatches code {
    color: var(--korum-ui-muted);
    font-size: 12px;
}

.korum-swatches .is-ink { background: var(--korum-ui-ink); }
.korum-swatches .is-red { background: var(--korum-ui-red); }
.korum-swatches .is-soft { background: var(--korum-ui-soft); }
.korum-swatches .is-success { background: var(--korum-ui-success); }

.korum-demo-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.korum-button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--korum-ui-border);
    border-radius: var(--korum-radius-control);
    color: var(--korum-ui-ink);
    display: inline-flex;
    font-size: 14px;
    font-weight: 750;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.korum-button:hover:not(:disabled),
.korum-button:focus-visible:not(:disabled) { transform: translateY(-1px); }
.korum-button.is-primary { background: var(--korum-ui-ink); border-color: var(--korum-ui-ink); color: #fff; }
.korum-button.is-accent { background: var(--korum-ui-red); border-color: var(--korum-ui-red); color: #fff; }
.korum-button.is-secondary { background: var(--korum-ui-soft); }
.korum-button.is-ghost { background: transparent; border-color: transparent; color: var(--korum-ui-red); }
.korum-button:disabled { cursor: not-allowed; opacity: .45; }

.korum-badge {
    background: #eef2f6;
    border: 1px solid #dce2e8;
    border-radius: 999px;
    color: #354052;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 9px;
    text-transform: uppercase;
}

.korum-badge.is-accent { background: #fff0f1; border-color: #ffc9cc; color: #b51920; }
.korum-badge.is-success { background: #ecf8f1; border-color: #b9e7cc; color: var(--korum-ui-success); }
.korum-badge.is-warning { background: #fff7df; border-color: #f3dda0; color: var(--korum-ui-warning); }

.korum-alert {
    border: 1px solid;
    border-left-width: 5px;
    border-radius: var(--korum-radius-control);
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
    padding: 13px 15px;
}

.korum-alert span { font-size: 14px; }
.korum-alert.is-info { background: #f0f6ff; border-color: #8dbaf5; }
.korum-alert.is-success { background: #edf9f2; border-color: #77c99a; }
.korum-alert.is-warning { background: #fff8e7; border-color: #dfbb5a; }
.korum-alert.is-error { background: #fff1f1; border-color: #e18484; }

.korum-form-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.korum-field {
    color: var(--korum-ui-ink);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 700;
    gap: 7px;
}

.korum-field.is-full { grid-column: 1 / -1; }
.korum-field small { color: var(--korum-ui-muted); font-size: 12px; font-weight: 400; }

.korum-field input,
.korum-field select,
.korum-field textarea {
    background: #fff;
    border: 1px solid #cbd2da;
    border-radius: var(--korum-radius-control);
    color: var(--korum-ui-ink);
    font: inherit;
    font-weight: 400;
    min-height: 46px;
    padding: 10px 12px;
    width: 100%;
}

.korum-field textarea { min-height: 110px; resize: vertical; }
.korum-field input:focus,
.korum-field select:focus,
.korum-field textarea:focus { border-color: #52657c; box-shadow: 0 0 0 3px rgba(82, 101, 124, .14); outline: 0; }
.korum-field.is-error input { border-color: #cc3b42; box-shadow: 0 0 0 3px rgba(204, 59, 66, .1); }
.korum-field.is-error small { color: #a8262d; }
.korum-field input:disabled,
.korum-field select:disabled,
.korum-field textarea:disabled { background: #eef1f4; color: #818895; cursor: not-allowed; }
.korum-field.is-focused input { border-color: #52657c; box-shadow: 0 0 0 3px rgba(82, 101, 124, .14); }
.korum-field.is-success input { border-color: var(--korum-ui-success); box-shadow: 0 0 0 3px rgba(22, 131, 74, .1); }
.korum-field.is-success small { color: var(--korum-ui-success); }
.korum-field.is-loading { position: relative; }
.korum-field.is-loading::after { animation: korum-demo-spin .8s linear infinite; border: 2px solid #d5dbe2; border-top-color: var(--korum-ui-red); border-radius: 50%; content: ""; height: 16px; position: absolute; right: 13px; top: 42px; width: 16px; }

.korum-choice-group {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin: 24px 0 0;
    padding: 0;
}

.korum-choice-group legend { font-size: 14px; font-weight: 800; margin-bottom: 10px; width: 100%; }
.korum-checkbox,
.korum-radio { align-items: center; cursor: pointer; display: inline-flex; gap: 9px; }
.korum-checkbox input,
.korum-radio input { accent-color: var(--korum-ui-red); height: 18px; width: 18px; }

.korum-switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    margin-top: 24px;
}

.korum-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.korum-switch > span { background: var(--korum-ui-ink); border-radius: var(--korum-radius-control); height: 26px; padding: 4px; transition: background .18s ease; width: 48px; }
.korum-switch > span::after { background: #fff; border-radius: var(--korum-radius-control); box-shadow: none; content: ""; display: block; height: 18px; transition: transform .18s ease; width: 18px; }
.korum-switch input:checked + span { background: var(--korum-ui-red); }
.korum-switch input:checked + span::after { transform: translateX(22px); }
.korum-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(82, 101, 124, .2); }

.korum-card {
    border: 1px solid var(--korum-ui-border);
    border-radius: var(--korum-radius-panel);
    padding: 24px;
}

.korum-card.is-featured { border-top: 4px solid var(--korum-ui-red); box-shadow: 0 10px 25px rgba(17,32,51,.08); }
.korum-card h3 { font-size: 20px; margin: 16px 0 8px; }
.korum-card p { color: var(--korum-ui-muted); }

.korum-table-wrap { overflow-x: auto; }
.korum-table-wrap table { border-collapse: collapse; min-width: 600px; width: 100%; }
.korum-table-wrap th,
.korum-table-wrap td { border-bottom: 1px solid var(--korum-ui-border); padding: 13px 12px; text-align: left; }
.korum-table-wrap th { background: var(--korum-ui-soft); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }

.korum-demo-accordion details { border-bottom: 1px solid var(--korum-ui-border); }
.korum-demo-accordion summary { cursor: pointer; font-weight: 750; list-style: none; padding: 16px 4px; }
.korum-demo-accordion summary::after { content: "+"; float: right; }
.korum-demo-accordion details[open] summary::after { content: "−"; }
.korum-demo-accordion details p { color: var(--korum-ui-muted); padding: 0 4px 16px; }

.korum-demo-pagination nav { display: flex; flex-wrap: wrap; gap: 7px; }
.korum-demo-pagination nav a { align-items: center; border: 1px solid var(--korum-ui-border); border-radius: var(--korum-radius-control); color: var(--korum-ui-ink); display: inline-flex; min-height: 42px; padding: 8px 12px; }
.korum-demo-pagination nav a.is-current { background: var(--korum-ui-ink); color: #fff; }

.korum-demo-field-states,
.korum-demo-search-filters,
.korum-demo-responsive-preview { grid-column: 1 / -1; }
.korum-demo-search,
.korum-demo-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.korum-demo-search input,
.korum-demo-coupon input { border: 1px solid #cbd2da; min-height: 46px; padding: 10px 12px; }
.korum-demo-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.korum-demo-filter-chips button { background: #fff; border: 1px solid var(--korum-ui-border); border-radius: 999px; padding: 7px 11px; }
.korum-demo-filter-chips button:last-child { border-color: transparent; color: var(--korum-ui-red); }
.korum-demo-filter-panel { align-items: end; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr); }
.korum-demo-payment > * + * { margin-top: 18px; }
.korum-demo-product { display: grid; gap: 20px; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); }
.korum-demo-product__visual { align-items: center; background: linear-gradient(135deg, #edf1f5, #d7dee7); color: #7b8796; display: flex; font-size: 28px; font-weight: 800; justify-content: center; min-height: 150px; }
.korum-demo-product h3 { margin: 14px 0 8px; }
.korum-demo-product p { color: var(--korum-ui-muted); }
.korum-demo-price { color: var(--korum-ui-red); display: block; font-size: 24px; margin: 14px 0; }
.korum-demo-cart-item { align-items: center; display: grid; gap: 18px; grid-template-columns: 96px minmax(0, 1fr) auto; }
.korum-demo-cart-item .korum-demo-product__visual { min-height: 96px; }
.korum-demo-cart-item small { display: block; margin-top: 5px; }
.korum-demo-quantity { display: inline-grid; grid-template-columns: 38px 54px 38px; margin-top: 12px; }
.korum-demo-quantity button, .korum-demo-quantity input { border: 1px solid var(--korum-ui-border); height: 38px; text-align: center; }
.korum-demo-delete { background: none; border: 0; color: #a8262d; display: block; margin-top: 8px; padding: 0; }
.korum-skeleton-card { display: grid; gap: 12px; margin-bottom: 18px; }
.korum-skeleton-card span { animation: korum-demo-pulse 1.2s ease-in-out infinite; background: #e8edf2; display: block; height: 18px; }
.korum-skeleton-card span:first-child { height: 120px; }
.korum-skeleton-card span:last-child { width: 58%; }
.korum-button.is-loading::before { animation: korum-demo-spin .8s linear infinite; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; content: ""; height: 15px; margin-right: 9px; width: 15px; }
.korum-demo-dialog { background: rgba(15, 25, 38, .58); padding: 28px; }
.korum-demo-dialog > div { background: #fff; border-left: 5px solid var(--korum-ui-red); margin: auto; max-width: 420px; padding: 24px; }
.korum-demo-buybar { align-items: center; border: 1px solid var(--korum-ui-border); box-shadow: 0 -7px 20px rgba(17, 32, 51, .12); display: flex; justify-content: space-between; padding: 12px 16px; }
.korum-demo-buybar small, .korum-demo-buybar strong { display: block; }
.korum-demo-viewports { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.korum-demo-viewports > div { border: 1px solid var(--korum-ui-border); border-top: 4px solid var(--korum-ui-ink); display: grid; gap: 5px; padding: 18px; }
.korum-demo-viewports span, .korum-demo-viewports small { color: var(--korum-ui-muted); }

@keyframes korum-demo-spin { to { transform: rotate(360deg); } }
@keyframes korum-demo-pulse { 50% { opacity: .48; } }

.wpcf7-form-control:not(.wpcf7-submit) {
    border-radius: var(--korum-radius-control);
}

.btn-cta.btn-theme {
    border-radius: var(--korum-radius-control);
}

/* Langage KORUM équilibre : structure Sominx et arrondis discrets. */
.korum-demo-section { border-radius: var(--korum-radius-panel); box-shadow: none; }
.korum-demo-hero { border-radius: var(--korum-radius-panel); }
.korum-demo-nav { border-radius: var(--korum-radius-panel); }
.korum-button { border-radius: var(--korum-radius-control); text-transform: none; }
.korum-field input { border-radius: var(--korum-radius-control); }
.korum-field select,
.korum-field textarea { border-radius: var(--korum-radius-control); }
.korum-card { border-radius: var(--korum-radius-panel); }
.korum-alert { border-radius: var(--korum-radius-control); }
.korum-badge { border-radius: var(--korum-radius-control); }
.korum-demo-pagination nav a { border-radius: var(--korum-radius-control); }
.korum-demo-filter-chips button { border-radius: var(--korum-radius-control); border-left: 3px solid var(--korum-ui-ink); }
.korum-demo-dialog > div { border-radius: var(--korum-radius-panel); }
.korum-demo-buybar { border-radius: var(--korum-radius-panel); }

.korum-demo-theme-comparison { grid-column: 1 / -1; }
.korum-demo-comparison { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.korum-demo-original-theme,
.korum-demo-architectural { align-items: flex-start; border: 1px solid var(--korum-ui-border); border-left: 5px solid var(--korum-ui-ink); display: flex; flex-direction: column; gap: 18px; min-height: 150px; padding: 24px; }
.korum-demo-architectural { border-left-color: var(--korum-ui-red); }

.korum-switch > span { background: var(--korum-ui-ink); border-radius: var(--korum-radius-control); height: 26px; padding: 4px; width: 48px; }
.korum-switch > span::after { border-radius: var(--korum-radius-control); box-shadow: none; height: 18px; width: 18px; }
.korum-switch input:checked + span { background: var(--korum-ui-red); }
.korum-switch input:checked + span::after { transform: translateX(22px); }

@media (max-width: 767px) {
    .korum-demo-page { padding: 28px 14px 50px; }
    .korum-demo-grid,
    .korum-form-grid,
    .korum-swatches,
    .korum-demo-card-grid { grid-template-columns: minmax(0, 1fr); }
    .korum-demo-section,
    .korum-demo-form-controls,
    .korum-demo-typography { grid-column: 1; }
    .korum-field.is-full { grid-column: 1; }
    .korum-demo-field-states,
    .korum-demo-search-filters,
    .korum-demo-responsive-preview { grid-column: 1; }
    .korum-demo-search,
    .korum-demo-coupon,
    .korum-demo-filter-panel,
    .korum-demo-product,
    .korum-demo-cart-item,
    .korum-demo-viewports { grid-template-columns: minmax(0, 1fr); }
    .korum-demo-cart-item > strong { text-align: right; }
    .korum-demo-comparison { grid-template-columns: minmax(0, 1fr); }
    .korum-demo-nav { max-width: calc(100% - 20px); overflow-x: auto; flex-wrap: nowrap; }
    .korum-demo-nav a { white-space: nowrap; }
    .korum-demo-section { padding: 24px 20px; }
}