.teml-document {
    --teml-rose: #c42a78;
    --teml-rose-soft: #fff0f7;
    --teml-purple: #6f42c1;
    --teml-purple-soft: #f3efff;
    --teml-ink: #2b2133;
    --teml-muted: #62586a;
    --teml-surface: #fffdfb;
    /*
     * Screen fallbacks. The derived values below consume the editable inline
     * WordPress palette while keeping enough nocturnal contrast for old data.
     */
    --teml-night: #070a1d;
    --teml-panel: rgb(9 12 38 / 88%);
    --teml-panel-strong: rgb(17 9 39 / 94%);
    --teml-panel-soft: rgb(31 20 60 / 78%);
    --teml-text: #fff7fd;
    --teml-text-muted: #e6d5e8;
    --teml-display-link: #8edcff;
    --teml-display-rose: #ff78bd;
    --teml-display-purple: #c790ff;
    --teml-display-blue: #5fb8ff;
    --teml-display-border: rgb(255 198 234 / 30%);
    --teml-display-border-strong: rgb(203 144 255 / 48%);
    --teml-radius: 24px;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 80px;
    color: var(--teml-text);
    background: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    font: 400 clamp(16px, 1.15vw, 18px)/1.72 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
}

@supports (color: color-mix(in srgb, #000, #fff)) {
    .teml-document {
        --teml-panel: color-mix(in srgb, var(--teml-surface, #17102f) 18%, rgb(6 8 29 / 92%));
        --teml-panel-strong: color-mix(in srgb, var(--teml-surface, #17102f) 12%, rgb(9 8 31 / 96%));
        --teml-panel-soft: color-mix(in srgb, var(--teml-purple-soft, #24163f) 24%, rgb(22 17 53 / 88%));
        --teml-text: color-mix(in srgb, var(--teml-ink, #fff7fd) 28%, #fff 72%);
        --teml-text-muted: color-mix(in srgb, var(--teml-muted, #dccce2) 50%, #fff 50%);
        --teml-display-link: color-mix(in srgb, var(--teml-purple, #9d70e8) 38%, #bcefff 62%);
        --teml-display-rose: color-mix(in srgb, var(--teml-rose, #e24b9a) 80%, #fff 20%);
        --teml-display-purple: color-mix(in srgb, var(--teml-purple, #9d70e8) 74%, #eadcff 26%);
        --teml-display-blue: color-mix(in srgb, var(--teml-purple, #9d70e8) 42%, #79ddff 58%);
        --teml-display-border: color-mix(in srgb, var(--teml-rose, #e24b9a) 38%, transparent);
        --teml-display-border-strong: color-mix(in srgb, var(--teml-purple, #9d70e8) 55%, transparent);
    }
}

.teml-document *,
.teml-document *::before,
.teml-document *::after {
    box-sizing: border-box;
}

/*
 * Theme/page-builder reset, strictly contained inside the shortcode root.
 * It neutralises the host site's gradient headings, inline-block paragraphs
 * and decorative pseudo-elements without changing the rest of the page.
 */
.teml-document :where(h1, h2, h3, h4, h5, h6) {
    display: block !important;
    width: auto !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    color: var(--teml-text) !important;
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

.teml-document :where(p, li, dt, dd, strong, b, em, span, a, code, caption, th, td) {
    -webkit-text-fill-color: currentColor !important;
}

.teml-document :where(p, li, dt, dd) {
    color: var(--teml-text) !important;
}

.teml-document.teml-document.teml-document p {
    display: block !important;
    width: auto !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.teml-document :where(h1, h2, h3, h4, h5, h6, p, a, span)::before,
.teml-document :where(h1, h2, h3, h4, h5, h6, p, a, span)::after {
    content: none !important;
    display: none !important;
}

.teml-document :where(a, code, dd, td, th) {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.teml-preview-banner {
    position: relative;
    z-index: 20;
    padding: 12px 20px;
    margin-bottom: 14px;
    color: #fff1c4;
    background: rgb(68 42 6 / 90%);
    border: 1px solid rgb(255 207 94 / 55%);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgb(0 0 0 / 24%);
    backdrop-filter: blur(12px);
    text-align: center;
}

/* The preview branch must not inherit an Elementor media aspect ratio. */
.teml-preview-mode .teml-preview-branch {
    display: block !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
}

.teml-document :where(h1, h2, h3, h4, p, ul, ol, dl, table, figure) {
    margin-top: 0;
}

.teml-document :where(h1, h2, h3, h4) {
    color: var(--teml-text);
    font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
    line-height: 1.18;
    letter-spacing: -.025em;
}

.teml-document a {
    color: var(--teml-display-link);
    text-decoration-thickness: .09em;
    text-underline-offset: .18em;
}

.teml-document a:not(.teml-button) {
    color: var(--teml-display-link) !important;
}

.teml-document :where(strong, b) {
    color: var(--teml-text) !important;
}

.teml-document a:hover {
    color: #c7efff;
}

.teml-document :focus-visible {
    outline: 3px solid var(--teml-display-rose);
    outline-offset: 4px;
    border-radius: 5px;
}

.teml-skip {
    position: absolute;
    z-index: 50;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: var(--teml-night) !important;
    background: var(--teml-text);
    border-radius: 10px;
    transform: translateY(-180%);
    transition: transform .15s ease;
}

.teml-skip:focus {
    transform: translateY(0);
}

.teml-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
    align-items: center;
    min-height: 480px;
    padding: clamp(38px, 6vw, 76px);
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--teml-display-rose) 22%, transparent) 0 8%, transparent 34%),
        radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--teml-display-blue) 20%, transparent), transparent 34%),
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--teml-rose-soft, #2b1634) 20%, rgb(25 9 41 / 96%)),
            color-mix(in srgb, var(--teml-purple-soft, #171c43) 18%, rgb(5 15 43 / 94%))
        ) !important;
    border: 1px solid var(--teml-display-border-strong);
    border-radius: calc(var(--teml-radius) + 8px);
    box-shadow: 0 28px 90px rgb(0 0 0 / 38%);
    backdrop-filter: blur(18px) saturate(125%);
}

.teml-hero::before,
.teml-hero::after {
    position: absolute;
    content: "";
    border-radius: 999px;
    pointer-events: none;
}

.teml-hero::before {
    width: 290px;
    height: 290px;
    top: -155px;
    right: 25%;
    background: color-mix(in srgb, var(--teml-display-rose) 16%, transparent);
}

.teml-hero::after {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: -80px;
    background: color-mix(in srgb, var(--teml-display-purple) 16%, transparent);
}

.teml-hero__copy {
    position: relative;
    z-index: 2;
}

.teml-hero__logo {
    display: block !important;
    width: min(360px, 72%) !important;
    height: auto !important;
    max-height: 130px;
    margin: 0 0 22px !important;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 12px 24px rgb(0 0 0 / 34%));
}

.teml-eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 7px 12px;
    color: color-mix(in srgb, var(--teml-display-rose) 46%, #fff);
    background: color-mix(in srgb, var(--teml-rose-soft, #35182f) 24%, rgb(50 17 54 / 84%));
    border: 1px solid var(--teml-display-border);
    border-radius: 999px;
    font-size: .78em;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.teml-hero h1 {
    max-width: 13ch;
    margin-bottom: 20px;
    font-size: clamp(2.5rem, 4.35vw, 4.1rem) !important;
    text-wrap: balance;
}

.teml-document .teml-lead {
    max-width: 58ch;
    margin-bottom: 26px;
    color: var(--teml-text-muted) !important;
    font-size: clamp(1.02rem, 1.55vw, 1.25rem);
}

.teml-document .teml-updated {
    margin: 18px 0 0;
    color: var(--teml-text-muted) !important;
    font-size: .88em;
}

.teml-policy-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.teml-policy-pills a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 7px 12px;
    color: var(--teml-text) !important;
    background: rgb(14 19 52 / 72%);
    border: 1px solid var(--teml-display-border);
    border-radius: 999px;
    font-size: .78em;
    font-weight: 760;
    line-height: 1.2;
    text-decoration: none;
}

.teml-policy-pills a:hover {
    color: #fff !important;
    background: rgb(68 36 93 / 86%);
}

.teml-hero__visual {
    position: relative;
    z-index: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -20px -36px -20px 12px;
}

.teml-hero__visual img {
    display: block;
    width: min(690px, 118%);
    height: auto;
    max-width: none;
    border-radius: 30px;
    border: 1px solid rgb(255 255 255 / 14%);
    box-shadow: 0 22px 48px rgb(0 0 0 / 28%);
    filter: none;
}

.teml-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.teml-actions--inline {
    margin: 22px 0;
}

.teml-document .teml-button,
.teml-document [data-tmcp-open] {
    appearance: none;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--teml-display-rose), var(--teml-display-purple));
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgb(0 0 0 / 28%);
    font: inherit;
    font-size: .92em;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.teml-document .teml-button:hover,
.teml-document [data-tmcp-open]:hover {
    color: #fff;
    box-shadow: 0 13px 32px rgb(0 0 0 / 36%);
    transform: translateY(-2px);
}

.teml-document .teml-button--ghost {
    color: #f6ddff !important;
    background: rgb(24 25 65 / 78%);
    border: 1px solid var(--teml-display-border-strong);
    box-shadow: none;
}

.teml-document .teml-button--ghost:hover {
    color: #fff !important;
    background: rgb(62 30 91 / 90%);
}

.teml-toc {
    position: relative;
    z-index: 3;
    width: min(970px, calc(100% - 48px));
    margin: 18px auto;
    padding: 24px;
    color: var(--teml-text);
    background: var(--teml-panel-strong) !important;
    border: 1px solid var(--teml-display-border);
    border-radius: var(--teml-radius);
    box-shadow: 0 18px 48px rgb(0 0 0 / 30%);
    backdrop-filter: blur(16px) saturate(120%);
}

.teml-toc__title {
    margin-bottom: 13px;
    font-weight: 850;
}

.teml-toc ol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.teml-toc a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 10px;
    color: var(--teml-text);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .85em;
    font-weight: 690;
    text-decoration: none;
}

.teml-toc a:hover {
    color: #fff;
    background: rgb(68 36 93 / 74%);
    border-color: var(--teml-display-border);
}

.teml-toc a span {
    display: inline-grid;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--teml-display-rose), var(--teml-display-purple));
    border-radius: 999px;
    font-size: .78em;
    font-weight: 850;
}

.teml-content {
    width: min(970px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0 0 28px;
}

.teml-section {
    scroll-margin-top: 32px;
    margin: 18px 0;
    padding: clamp(30px, 5vw, 56px);
    color: var(--teml-text);
    background: var(--teml-panel) !important;
    border: 1px solid var(--teml-display-border);
    border-radius: var(--teml-radius);
    box-shadow: 0 18px 52px rgb(0 0 0 / 28%);
    backdrop-filter: blur(16px) saturate(120%);
}

.teml-section:last-child {
    margin-bottom: 0;
}

.teml-section p:last-child,
.teml-section li:last-child {
    margin-bottom: 0;
}

.teml-section h3 {
    margin: 34px 0 13px;
    font-size: clamp(1.25rem, 2.1vw, 1.55rem);
}

.teml-section h4 {
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.teml-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 26px;
}

.teml-heading > span {
    display: inline-grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--teml-display-rose), var(--teml-display-purple));
    border-radius: 15px;
    box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
    font-size: .78em;
    font-weight: 900;
}

.teml-heading h2 {
    margin: 3px 0 0;
    font-size: clamp(1.75rem, 3.6vw, 2.65rem) !important;
    text-wrap: balance;
}

.teml-grid {
    display: grid;
    gap: 18px;
}

.teml-grid--two {
    grid-template-columns: minmax(0, 1fr) !important;
}

.teml-card,
.teml-callout,
.teml-example {
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--teml-radius);
}

.teml-card {
    color: var(--teml-text);
    background: var(--teml-panel-soft) !important;
    border: 1px solid var(--teml-display-border);
    box-shadow: 0 14px 34px rgb(0 0 0 / 23%);
}

.teml-card h3,
.teml-card h4 {
    margin-top: 0;
}

.teml-callout {
    margin: 24px 0;
    color: var(--teml-text);
    background: linear-gradient(135deg, rgb(84 40 111 / 76%), rgb(55 20 70 / 76%)) !important;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--teml-purple-soft, #251940) 34%, rgb(57 27 83 / 82%)),
            color-mix(in srgb, var(--teml-rose-soft, #35192f) 30%, rgb(52 18 64 / 82%))
        ) !important;
    border: 1px solid var(--teml-display-border);
}

.teml-callout h3 {
    margin-top: 0;
}

.teml-callout--plain {
    background: rgb(25 26 66 / 84%) !important;
    background: color-mix(in srgb, var(--teml-surface, #17102f) 16%, rgb(20 22 61 / 88%)) !important;
}

.teml-callout--sensitive {
    border-left: 6px solid var(--teml-display-rose);
}

.teml-example {
    margin: 24px 0;
    color: var(--teml-text);
    background: rgb(65 43 14 / 78%) !important;
    border: 1px solid rgb(255 207 113 / 42%);
}

.teml-example h3 {
    margin-top: 0;
}

.teml-list {
    padding-left: 1.25em;
}

.teml-list li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.teml-list li::marker {
    color: var(--teml-display-rose);
}

.teml-dl {
    margin: 0;
}

.teml-dl > div {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr);
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--teml-display-border);
}

.teml-dl > div:last-child {
    border-bottom: 0;
}

.teml-dl dt {
    color: var(--teml-text-muted) !important;
    font-size: .82em;
    font-weight: 740;
}

.teml-dl dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 620;
}

.teml-table-wrap {
    max-width: 100%;
    margin: 22px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    background: rgb(6 9 30 / 84%) !important;
    border: 1px solid var(--teml-display-border);
    border-radius: 18px;
    scrollbar-color: var(--teml-display-purple) rgb(8 9 29 / 80%);
}

.teml-document table {
    width: 100%;
    min-width: 650px;
    border: 0;
    border-collapse: collapse;
    color: var(--teml-text);
    background: transparent !important;
    font-size: .91em;
}

.teml-document caption {
    padding: 16px 18px;
    color: var(--teml-text);
    background: rgb(49 29 75 / 94%) !important;
    font-weight: 800;
    text-align: left;
}

.teml-document th,
.teml-document td {
    padding: 14px 18px;
    border: 0;
    color: var(--teml-text);
    background: transparent !important;
    border-bottom: 1px solid var(--teml-display-border);
    text-align: left;
    vertical-align: top;
}

.teml-document th {
    color: #efd9ff;
    background: rgb(40 29 70 / 92%) !important;
    font-size: .82em;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.teml-document tbody tr:last-child td {
    border-bottom: 0;
}

.teml-retention-rule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center;
    gap: 15px;
    margin: 28px 0;
}

.teml-retention-rule > div {
    min-height: 150px;
    display: grid;
    place-content: center;
    padding: 22px;
    text-align: center;
    background: linear-gradient(145deg, rgb(80 29 71 / 86%), rgb(38 31 84 / 86%)) !important;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--teml-rose-soft, #35192f) 30%, rgb(67 23 62 / 88%)),
            color-mix(in srgb, var(--teml-purple-soft, #251940) 30%, rgb(30 27 76 / 88%))
        ) !important;
    border: 1px solid var(--teml-display-border);
    border-radius: var(--teml-radius);
}

.teml-retention-rule strong {
    color: #f1c9ff !important;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}

.teml-retention-rule span {
    margin-top: 10px;
    color: var(--teml-text-muted);
    font-size: .88em;
}

.teml-retention-rule > span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin: 0;
    justify-self: center;
    color: #fff;
    background: linear-gradient(135deg, var(--teml-display-rose), var(--teml-display-purple));
    border-radius: 999px;
    font-weight: 900;
}

.teml-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(970px, calc(100% - 48px));
    margin: 18px auto 0;
    padding: 24px clamp(24px, 5vw, 48px);
    color: var(--teml-text-muted);
    background: var(--teml-panel-strong) !important;
    border: 1px solid var(--teml-display-border);
    border-radius: var(--teml-radius);
    box-shadow: 0 18px 48px rgb(0 0 0 / 30%);
    backdrop-filter: blur(16px) saturate(120%);
    font-size: .9em;
}

.teml-footer p {
    margin: 0;
    color: var(--teml-text-muted) !important;
}

.teml-back {
    white-space: nowrap;
    font-weight: 750;
}

.teml-unavailable {
    width: min(760px, calc(100% - 32px));
    margin: 40px auto;
    padding: 30px;
    color: var(--teml-text);
    background: var(--teml-panel-strong) !important;
    border: 2px solid var(--teml-display-rose);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgb(0 0 0 / 34%);
    backdrop-filter: blur(16px) saturate(120%);
    font: 400 17px/1.65 system-ui, sans-serif;
}

.teml-unavailable h2 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .teml-hero {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .teml-hero h1 {
        max-width: 18ch;
    }

    .teml-hero__visual {
        margin: 22px -18px 0;
    }

    .teml-hero__visual img {
        width: min(760px, 108%);
    }

    .teml-toc ol {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    .teml-document {
        width: min(100%, calc(100% - 16px));
        margin: 8px auto 40px;
        border-radius: 20px;
        font-size: 16px;
    }

    .teml-hero {
        min-height: auto;
        padding: 34px 22px 0;
    }

    .teml-hero h1 {
        font-size: clamp(2.1rem, 12vw, 3.2rem);
    }

    .teml-hero__visual {
        margin-inline: -12px;
    }

    .teml-hero__logo {
        width: min(310px, 86%) !important;
        max-height: 104px;
    }

    .teml-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .teml-document .teml-button,
    .teml-document [data-tmcp-open] {
        width: 100%;
    }

    .teml-toc,
    .teml-content,
    .teml-footer {
        width: calc(100% - 28px);
    }

    .teml-toc {
        margin-top: -10px;
        padding: 18px;
    }

    .teml-toc ol,
    .teml-grid--two {
        grid-template-columns: 1fr;
    }

    .teml-heading {
        gap: 11px;
    }

    .teml-heading > span {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .teml-heading h2 {
        font-size: 1.75rem;
    }

    .teml-dl > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .teml-retention-rule {
        grid-template-columns: 1fr;
    }

    .teml-retention-rule > span {
        justify-self: center;
    }

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

@media (max-width: 380px) {
    .teml-document {
        width: calc(100% - 8px);
    }

    .teml-hero {
        padding: 28px 16px 0;
    }

    .teml-toc,
    .teml-content,
    .teml-footer {
        width: calc(100% - 12px);
    }

    .teml-toc,
    .teml-section {
        padding: 22px 18px;
    }

    .teml-card,
    .teml-callout,
    .teml-example {
        padding: 18px;
    }

    .teml-heading > span {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .teml-heading h2 {
        font-size: 1.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teml-document *,
    .teml-document *::before,
    .teml-document *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    .teml-document,
    .teml-hero,
    .teml-section,
    .teml-card,
    .teml-callout,
    .teml-example,
    .teml-toc,
    .teml-footer,
    .teml-table-wrap {
        border: 1px solid CanvasText;
        box-shadow: none;
    }

    .teml-heading > span,
    .teml-document .teml-button,
    .teml-document [data-tmcp-open] {
        color: ButtonText;
        background: ButtonFace;
        border: 1px solid ButtonText;
    }
}

@media print {
    .teml-document {
        width: 100%;
        margin: 0;
        border: 0;
        box-shadow: none;
        color: #000 !important;
        background: #fff !important;
    }

    .teml-hero {
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 24px 0;
        color: #000 !important;
        background: #fff !important;
        border: 0;
    }

    .teml-hero__visual,
    .teml-actions,
    .teml-toc,
    .teml-back,
    .teml-skip,
    .teml-preview-banner {
        display: none !important;
    }

    .teml-content {
        width: 100%;
        padding: 0;
    }

    .teml-section,
    .teml-card,
    .teml-callout,
    .teml-example,
    .teml-retention-rule > div,
    .teml-footer,
    .teml-table-wrap,
    .teml-document table,
    .teml-document caption,
    .teml-document th,
    .teml-document td {
        break-inside: avoid;
        color: #000 !important;
        background: #fff !important;
        border-color: #bbb;
        box-shadow: none;
    }

    .teml-document :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, strong, b, span, code) {
        color: #000 !important;
        -webkit-text-fill-color: currentColor !important;
    }

    .teml-document a {
        color: #000 !important;
        text-decoration: underline;
    }
}

/* 1.4.2-PASS823 - Readable tables.
 * Cells no longer break words anywhere: with overflow-wrap:anywhere the table layout squeezed the first column
 * to one character and split words ("photogra-phies"). The first column keeps room for its longest word.
 * On phones, each row becomes a small card (title, then text): no clipped second column, no hidden scroll.
 */
.teml-document table :where(th, td) {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
}

.teml-document table :where(th, td):first-child {
    width: 34%;
    min-width: 9.5em;
}

/* The base rule kept tables at 650px minimum: from 681 to about 800px the second column was clipped. */
.teml-document table {
    min-width: 0;
}

@media (max-width: 680px) {
    .teml-document .teml-table-wrap {
        overflow-x: visible;
    }

    .teml-document table,
    .teml-document table caption,
    .teml-document table tbody,
    .teml-document table tr,
    .teml-document table td {
        display: block;
        width: auto;
    }

    .teml-document table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .teml-document table tbody tr {
        padding: 14px 18px;
        border-bottom: 1px solid var(--teml-display-border);
    }

    .teml-document table tbody tr:last-child {
        border-bottom: 0;
    }

    .teml-document table tbody td {
        padding: 0;
        border: 0;
    }

    .teml-document table tbody td:first-child {
        min-width: 0;
        width: auto;
        margin-bottom: 6px;
        color: #efd9ff;
        font-weight: 750;
    }
}

/* 1.4.2-PASS823 - On this page only, on wide screens, the floating cookie button (Consent Popups) becomes a round
 * heart button that opens on hover or keyboard focus: it no longer covers the introduction of the header. The label
 * stays in the accessible name, and the page keeps its own "manage cookies" link in the text.
 */
@media (min-width: 1024px) {
    body:has(.teml-document) .tmcp-floating-button {
        justify-content: center;
        gap: 0;
        min-width: 42px;
        padding: 9px 12px;
        font-size: 0;
    }

    body:has(.teml-document) .tmcp-floating-button span {
        font-size: 17px;
    }

    body:has(.teml-document) .tmcp-floating-button:is(:hover, :focus-visible) {
        gap: 8px;
        padding: 9px 15px;
        font-size: 12px;
    }
}

/* 1.4.4-PASS823 - The header illustration is shown whole. It was drawn wider than its column (118 %, negative margins)
 * and the card (overflow: hidden) cut it on the right, on desktop and on phones. It now fits its column at every width.
 */
.teml-hero__visual {
    margin: 0;
}

.teml-hero__visual img {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 900px) {
    .teml-hero {
        padding-bottom: 24px;
    }

    .teml-hero__visual {
        margin: 22px 0 0;
    }

    .teml-hero__visual img {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .teml-hero__visual {
        margin-inline: 0;
    }
}

/* 1.4.5-PASS823 - The square logo has a black background outside its neon frame. A rounded mask that follows
 * the outer edge of the frame removes the four black corners and keeps the dark tile inside the frame, so the heart keeps
 * its colours. The mask is sized and placed like the image itself (contain, left center). No shadow: the mask would cut it.
 */
.teml-hero__logo {
    filter: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1254 1254'%3E%3Crect x='44' y='44' width='1166' height='1166' rx='258'/%3E%3C/svg%3E") left center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1254 1254'%3E%3Crect x='44' y='44' width='1166' height='1166' rx='258'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* 1.4.6-PASS823 - The header card is transparent (Anthony, 19/09): the site background shows through it. No tinted
 * gradient, no blur and no halos any more; a thin light border keeps it readable as a block.
 */
.teml-hero {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-color: rgb(255 255 255 / 16%);
}

.teml-hero::before,
.teml-hero::after {
    display: none;
}

/* The logo is the icon of the coming app: say so, under it. */
.teml-hero__app {
    margin: -12px 0 18px;
    color: color-mix(in srgb, var(--teml-display-rose) 38%, #fff);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* 1.4.8-PASS831 - « Avertissement » (Anthony, 13/10/2026) : encadré à bord et titre rouges, dans
 * « Disponibilité et responsabilité ». Fond presque opaque : le fond étoilé ne change pas le contraste.
 * Contraste au pire, l'encadré posé sur du blanc : titre rouge 6,1:1, texte 16,1:1 (seuil AA : 4,5:1).
 * Le titre bat la remise à zéro des titres (.teml-document :where(h4), !important) par sa spécificité.
 */
.teml-callout.teml-callout--warning {
    --teml-warning: #ff6b6b;
    background: rgb(40 9 20 / 96%) !important;
    border: 2px solid var(--teml-warning);
    border-left-width: 6px;
}

.teml-document .teml-callout--warning h4 {
    color: var(--teml-warning) !important;
    font-size: 1.15rem;
    letter-spacing: .02em;
}

@media (forced-colors: active) {
    .teml-callout.teml-callout--warning {
        border: 2px solid CanvasText;
    }
}

@media print {
    .teml-callout.teml-callout--warning {
        background: #fff !important;
        border: 2px solid #a40000;
    }

    .teml-document .teml-callout--warning h4 {
        color: #a40000 !important;
    }
}