/* Habillage écran du générateur d'imagiers. La zone imprimable conserve ses règles locales. */
@media screen {
    #im-studio {
        --im-ink: #183b52;
        --im-ink-soft: #496273;
        --im-blue: #235d78;
        --im-blue-soft: #eaf3f6;
        --im-sage: #47735d;
        --im-sage-soft: #eaf2ec;
        --im-saffron: #8a5b0e;
        --im-saffron-soft: #fff3d8;
        --im-line: #d8e2df;
        --im-paper: #fffefa;
        --im-shadow: 0 14px 34px rgb(24 59 82 / 8%);
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 1.1rem;
        width: min(100%, 1400px);
        max-width: 1400px;
        margin: 0 auto;
        padding: clamp(1rem, 2.6vw, 2.25rem) clamp(0.85rem, 2.2vw, 1.75rem) 3rem;
        color: var(--im-ink);
        overflow-wrap: anywhere;
    }

    #im-studio *,
    #im-studio *::before,
    #im-studio *::after {
        box-sizing: border-box;
    }

    #im-studio > :not(.im-settings-panel):not(#im-preview) {
        grid-column: 1 / -1;
        min-width: 0;
    }

    #im-studio .im-hero {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(170px, 0.38fr);
        align-items: center;
        gap: clamp(1rem, 3vw, 2.5rem);
        min-height: 220px;
        margin: 0;
        padding: clamp(1.4rem, 3.2vw, 2.7rem);
        overflow: hidden;
        border: 1px solid #d5e4df;
        border-radius: 28px;
        background:
            radial-gradient(ellipse at 78% 8%, rgb(255 243 216 / 88%), transparent 38%),
            linear-gradient(125deg, #f5faf7 0%, #fffefa 58%, #eef6f7 100%);
        box-shadow: var(--im-shadow);
        text-align: left;
    }

    #im-studio .im-hero-copy {
        position: relative;
        z-index: 1;
        min-width: 0;
        max-width: 840px;
    }

    #im-studio .im-hero-eyebrow,
    #im-studio .im-preview-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0 0 0.55rem;
        color: var(--im-sage);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.11em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    #im-studio .im-hero-eyebrow::before {
        width: 1.4rem;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        content: "";
    }

    #im-studio .im-hero h1 {
        max-width: 760px;
        margin: 0 0 0.65rem;
        color: var(--im-ink);
        font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
        font-size: clamp(2rem, 4vw, 3.25rem);
        font-weight: 700;
        letter-spacing: -0.045em;
        line-height: 1.06;
        text-wrap: balance;
    }

    #im-studio .im-hero-copy > p:not(.im-hero-eyebrow):not(.im-hint) {
        max-width: 760px;
        margin: 0;
        color: var(--im-ink-soft);
        font-size: clamp(0.98rem, 1.5vw, 1.12rem);
        line-height: 1.65;
    }

    #im-studio .im-hero-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.1rem;
    }

    #im-studio .im-hero-meta > * {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0.4rem 0.72rem;
        border: 1px solid #d7e4dd;
        border-radius: 999px;
        background: rgb(255 255 255 / 76%);
        color: var(--im-ink);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.3;
        text-decoration: none;
    }

    #im-studio .im-hero-meta a {
        border-color: #bed5c7;
        background: var(--im-sage-soft);
        color: #28563d;
    }

    #im-studio .im-hero-meta a:hover {
        border-color: var(--im-sage);
        background: #dcebe0;
    }

    #im-studio .im-hero-art {
        position: relative;
        display: grid;
        min-width: 0;
        min-height: 168px;
        place-items: center;
        isolation: isolate;
    }

    #im-studio .im-hero-art::before,
    #im-studio .im-hero-art::after {
        position: absolute;
        z-index: -1;
        border: 1px solid rgb(35 93 120 / 13%);
        border-radius: 50%;
        content: "";
    }

    #im-studio .im-hero-art::before {
        width: 158px;
        height: 158px;
        background: rgb(234 243 246 / 76%);
    }

    #im-studio .im-hero-art::after {
        width: 205px;
        height: 205px;
        border-style: dashed;
        opacity: 0.7;
    }

    #im-studio .im-art-card {
        position: absolute;
        display: grid;
        width: 76px;
        height: 88px;
        place-items: center;
        border: 1px solid #d8e3d8;
        border-radius: 15px;
        background: #fffefa;
        box-shadow: 0 12px 24px rgb(24 59 82 / 13%);
        font-size: 2.35rem;
        line-height: 1;
    }

    #im-studio .im-art-card:nth-child(1) { transform: translate(-52px, 18px) rotate(-13deg); }
    #im-studio .im-art-card:nth-child(2) { z-index: 1; transform: translate(3px, -19px) rotate(3deg); }
    #im-studio .im-art-card:nth-child(3) { transform: translate(58px, 17px) rotate(13deg); }

    #im-studio .generator-workflow {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin: -0.2rem 0 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #im-studio .generator-workflow a {
        display: inline-flex;
        align-items: center;
        min-height: 42px;
        padding: 0.55rem 0.9rem;
        border: 1px solid var(--im-line);
        border-radius: 999px;
        background: var(--im-paper);
        color: var(--im-blue);
        font-size: 0.9rem;
        font-weight: 750;
        text-decoration: none;
    }

    #im-studio .generator-workflow a:hover {
        border-color: #9ab9c5;
        background: var(--im-blue-soft);
    }

    #im-studio .im-settings-panel,
    #im-studio #im-preview,
    #im-studio .im-corpus-section {
        min-width: 0;
        border: 1px solid var(--im-line);
        border-radius: 22px;
        background: var(--im-paper);
        box-shadow: var(--im-shadow);
    }

    #im-studio .im-settings-panel {
        grid-column: 1;
        align-self: start;
        padding: 1rem;
    }

    #im-studio .im-settings-panel > .im-block {
        margin: 0;
        padding: 0.8rem 0.5rem 1rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #im-studio .im-settings-panel > .im-block + .im-block {
        padding-top: 1.05rem;
        border-top: 1px solid #e4ebe7;
    }

    #im-studio .im-settings-panel .im-block h2 {
        gap: 0.65rem;
        margin: 0 0 0.8rem;
        color: var(--im-ink);
        font-size: 1.04rem;
        line-height: 1.3;
    }

    #im-studio .im-step {
        width: 1.85rem;
        height: 1.85rem;
        border: 2px solid #d6e8dd;
        background: var(--im-sage-soft);
        color: #28563d;
        font-size: 0.9rem;
    }

    #im-studio .im-themes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    #im-studio .im-theme {
        min-width: 0;
        min-height: 52px;
        gap: 0.45rem;
        padding: 0.45rem 0.5rem;
        border: 1px solid #d8e3df;
        border-radius: 13px;
        background: #fff;
        transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
    }

    #im-studio .im-theme:hover {
        border-color: #8caf9b;
        background: #f7fbf8;
    }

    #im-studio .im-theme:has(input:checked) {
        border: 2px solid #47735d;
        padding: calc(0.45rem - 1px) calc(0.5rem - 1px);
        background: #eaf2ec;
        box-shadow: inset 0 0 0 1px rgb(71 115 93 / 8%);
    }

    #im-studio .im-theme:focus-within {
        outline: 3px solid #1d6480;
        outline-offset: 2px;
    }

    #im-studio .im-theme input {
        width: 24px;
        height: 24px;
        margin: 0;
        accent-color: #356b51;
    }

    #im-studio .im-theme .em {
        flex: 0 0 auto;
        font-size: 1.32rem;
    }

    #im-studio .im-theme .nm {
        min-width: 0;
        font-size: 0.84rem;
        line-height: 1.2;
    }

    #im-studio .im-theme .ct {
        flex: 0 0 auto;
        margin-left: auto;
        color: #526b61;
        font-size: 0.72rem;
        font-variant-numeric: tabular-nums;
    }

    #im-studio .im-themes-actions {
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    #im-studio .im-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    #im-studio .im-field {
        min-width: 0;
    }

    #im-studio .im-field > span.lbl {
        margin-bottom: 0.5rem;
        color: var(--im-ink-soft);
        font-size: 0.85rem;
    }

    #im-studio .im-segmented {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    #im-studio #im-mode button,
    #im-studio #im-writing button,
    #im-studio #im-match button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 46px;
        padding: 0.55rem 0.65rem;
        border: 1px solid #d3e0dd;
        border-radius: 12px;
        background: #fff;
        color: var(--im-ink);
        font-size: 0.84rem;
        font-weight: 750;
        line-height: 1.3;
        text-align: center;
        transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
    }

    #im-studio #im-mode button[aria-pressed="true"],
    #im-studio #im-writing button[aria-pressed="true"],
    #im-studio #im-match button[aria-pressed="true"] {
        border-color: #235d78;
        background: #235d78;
        color: #fff;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
    }

    #im-studio #im-mode button:hover:not([aria-pressed="true"]),
    #im-studio #im-writing button:hover:not([aria-pressed="true"]),
    #im-studio #im-match button:hover:not([aria-pressed="true"]) {
        border-color: #87adba;
        background: var(--im-blue-soft);
    }

    #im-studio .im-segmented button:focus-visible,
    #im-studio .im-btn:focus-visible,
    #im-studio a:focus-visible,
    #im-studio select:focus-visible {
        outline: 3px solid #a96908;
        outline-offset: 3px;
    }

    #im-studio .im-hint {
        margin-top: 0.5rem;
        color: #526b61;
        font-size: 0.82rem;
        line-height: 1.5;
    }

    #im-studio .im-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin: 0.35rem 0 0;
        padding: 0.85rem 0.5rem 0.4rem;
        border-top: 1px solid #e4ebe7;
    }

    #im-studio .im-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 46px;
        padding: 0.65rem 0.75rem;
        border: 1px solid #235d78;
        border-radius: 12px;
        background: #235d78;
        color: #fff;
        font-size: 0.88rem;
        line-height: 1.3;
        text-align: center;
        transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
    }

    #im-studio .im-btn:hover:not(:disabled) {
        border-color: #17475f;
        background: #17475f;
    }

    #im-studio .im-btn.secondary {
        border-color: #b9d0c2;
        background: #eaf2ec;
        color: #28563d;
    }

    #im-studio .im-btn.secondary:hover:not(:disabled) {
        border-color: #7da38b;
        background: #dcebe0;
    }

    #im-studio .im-btn:disabled {
        opacity: 0.58;
    }

    #im-studio .generator-print-options {
        grid-column: 1 / -1;
        min-width: 0;
        margin: 0.15rem 0 0;
        padding: 0.8rem;
        border: 1px solid #e0e7e3;
        border-radius: 14px;
        background: #f8faf8;
    }

    #im-studio .generator-print-options legend {
        padding: 0 0.35rem;
        color: var(--im-ink);
        font-size: 0.86rem;
        font-weight: 800;
    }

    #im-studio .generator-print-choices {
        display: grid;
        gap: 0.35rem;
    }

    #im-studio .generator-print-choices label {
        display: flex;
        align-items: center;
        min-height: 44px;
        gap: 0.6rem;
        color: var(--im-ink-soft);
        font-size: 0.86rem;
        font-weight: 650;
    }

    #im-studio .generator-print-choices input {
        width: 20px;
        height: 20px;
        accent-color: #356b51;
    }

    #im-studio .generator-print-help,
    #im-studio .generator-print-count {
        color: #526b61;
        font-size: 0.78rem;
        line-height: 1.45;
    }

    #im-studio #im-preview {
        position: static;
        grid-column: 2;
        align-self: start;
        max-height: 72vh;
        min-height: 480px;
        overflow: auto;
        overscroll-behavior: contain;
        padding: clamp(0.85rem, 1.7vw, 1.25rem);
        scroll-margin-top: calc(var(--generator-header-height, 104px) + 0.8rem);
        scrollbar-color: #a9c3b3 transparent;
        scrollbar-width: thin;
    }

    #im-studio .im-preview-heading {
        position: sticky;
        z-index: 2;
        top: calc(-1 * clamp(0.85rem, 1.7vw, 1.25rem));
        margin: calc(-1 * clamp(0.85rem, 1.7vw, 1.25rem)) calc(-1 * clamp(0.85rem, 1.7vw, 1.25rem)) 1rem;
        padding: 1rem clamp(0.85rem, 1.7vw, 1.25rem) 0.9rem;
        border-bottom: 1px solid #e2eae5;
        background: rgb(255 254 250 / 96%);
        backdrop-filter: blur(8px);
    }

    #im-studio .im-preview-kicker {
        margin-bottom: 0.25rem;
        color: var(--im-saffron);
        font-size: 0.7rem;
    }

    #im-studio .im-preview-heading h2 {
        margin: 0;
        color: var(--im-ink);
        font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
        font-size: 1.35rem;
        letter-spacing: -0.025em;
        line-height: 1.2;
    }

    #im-studio #im-preview .im-empty {
        margin: 0.7rem 0;
        padding: 2.2rem 1rem;
        border: 1px dashed #b9cdc2;
        border-radius: 16px;
        background: #f7faf7;
        color: #496273;
        font-size: 0.94rem;
        line-height: 1.55;
    }

    #im-studio .im-corpus-section {
        padding: clamp(1rem, 2.2vw, 1.6rem);
    }

    #im-studio .im-corpus-section > h2 {
        color: var(--im-ink);
    }

    #im-studio .im-corpus-card {
        border-color: #d8e3df;
        background: #f8faf8;
    }

    #im-studio .im-corpus-card + .im-corpus-card {
        margin-top: 0.8rem;
    }

    #im-studio .im-corpus-controls .im-btn,
    #im-studio .im-corpus-controls select {
        min-height: 44px;
    }

    #im-studio .im-corpus-controls > a {
        color: var(--im-blue);
        font-weight: 700;
    }

    #im-studio :is(.im-hero-meta a, .generator-workflow a, .im-btn, .im-segmented button, .im-theme, .im-corpus-controls select) {
        -webkit-tap-highlight-color: transparent;
    }

    html[data-theme="dark"] #im-studio {
        --im-ink: #e7f0ee;
        --im-ink-soft: #c1d1ce;
        --im-blue: #b8d9e5;
        --im-blue-soft: #213943;
        --im-sage: #b1d2bb;
        --im-sage-soft: #263b30;
        --im-saffron: #f3cb76;
        --im-line: #40534f;
        --im-paper: #182522;
        --im-shadow: 0 14px 34px rgb(0 0 0 / 22%);
    }

    html[data-theme="dark"] #im-studio .im-hero {
        border-color: #42574f;
        background:
            radial-gradient(ellipse at 78% 8%, rgb(106 84 37 / 26%), transparent 38%),
            linear-gradient(125deg, #1c302a 0%, #1a2927 58%, #1b3038 100%);
    }

    html[data-theme="dark"] #im-studio :is(.im-hero h1, .im-preview-heading h2, .im-settings-panel .im-block h2, .im-corpus-section > h2) {
        color: var(--im-ink);
    }

    html[data-theme="dark"] #im-studio :is(.im-hero-meta > *, .im-theme, #im-mode button, #im-writing button, #im-match button) {
        border-color: #4b625b;
        background: #21332f;
        color: #e5efec;
    }

    html[data-theme="dark"] #im-studio .im-hero-meta a {
        background: #294437;
        color: #d2ead8;
    }

    html[data-theme="dark"] #im-studio .im-hero-meta a:hover,
    html[data-theme="dark"] #im-studio .im-theme:hover {
        background: #304b3d;
    }

    html[data-theme="dark"] #im-studio .im-theme:has(input:checked) {
        border-color: #98c2a4;
        background: #294437;
        color: #f1f8f2;
    }

    html[data-theme="dark"] #im-studio :is(#im-mode button[aria-pressed="true"], #im-writing button[aria-pressed="true"], #im-match button[aria-pressed="true"]) {
        border-color: #86b4c3;
        background: #326b82;
        color: #fff;
    }

    html[data-theme="dark"] #im-studio .im-btn {
        border-color: #39738a;
        background: #326b82;
        color: #fff;
    }

    html[data-theme="dark"] #im-studio .im-btn.secondary {
        border-color: #56745f;
        background: #294437;
        color: #d6ecda;
    }

    html[data-theme="dark"] #im-studio .generator-print-options,
    html[data-theme="dark"] #im-studio .im-corpus-card,
    html[data-theme="dark"] #im-studio #im-preview .im-empty {
        border-color: #40534f;
        background: #1f302c;
    }

    html[data-theme="dark"] #im-studio :is(.im-hint, .im-theme .ct, .generator-print-help, .generator-print-count, #im-preview .im-empty) {
        color: var(--im-ink-soft);
    }

    html[data-theme="dark"] #im-studio .im-step {
        border-color: #56745f;
        color: #d6ecda;
    }

    html[data-theme="dark"] #im-studio .im-art-card {
        border-color: #4b625b;
        background: #263832;
    }

    html[data-theme="dark"] #im-studio .im-preview-heading {
        border-bottom-color: #40534f;
        background: rgb(24 37 34 / 97%);
    }

    html.oplc-projection-mode #im-studio {
        display: block;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    html.oplc-projection-mode #im-studio :is(.im-settings-panel, .im-hero, .im-corpus-section, .generator-workflow, .generator-print-options) {
        display: none !important;
    }

    html.oplc-projection-mode #im-studio #im-preview {
        position: static;
        width: 100%;
        max-height: none;
        min-height: 0;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overscroll-behavior: auto;
    }

    html.oplc-projection-mode #im-studio .im-preview-heading {
        position: static;
        margin: 0 0 1rem;
        padding: 0 0 0.8rem;
        background: transparent;
        backdrop-filter: none;
    }

    @media (max-width: 900px) {
        #im-studio {
            grid-template-columns: minmax(0, 1fr);
            gap: 0.9rem;
        }

        #im-studio .im-settings-panel,
        #im-studio #im-preview {
            grid-column: 1 / -1;
        }

        #im-studio #im-preview {
            position: static;
            max-height: none;
            min-height: 0;
            overflow: visible;
            overscroll-behavior: auto;
        }

        #im-studio .im-preview-heading {
            position: static;
            margin: 0 0 0.8rem;
            padding: 0 0 0.75rem;
            background: transparent;
            backdrop-filter: none;
        }
    }

    @media (max-width: 560px) {
        #im-studio {
            gap: 0.75rem;
            padding: 0.8rem 0.7rem 2rem;
        }

        #im-studio .im-hero {
            grid-template-columns: minmax(0, 1fr);
            min-height: 0;
            gap: 0.7rem;
            padding: 1.2rem 1rem 0.8rem;
            border-radius: 22px;
        }

        #im-studio .im-hero-art {
            min-height: 118px;
            max-width: 300px;
            width: 100%;
            justify-self: center;
        }

        #im-studio .im-hero-art::before { width: 112px; height: 112px; }
        #im-studio .im-hero-art::after { width: 150px; height: 150px; }
        #im-studio .im-art-card { width: 59px; height: 69px; border-radius: 12px; font-size: 1.85rem; }
        #im-studio .im-art-card:nth-child(1) { transform: translate(-42px, 12px) rotate(-13deg); }
        #im-studio .im-art-card:nth-child(2) { transform: translate(2px, -11px) rotate(3deg); }
        #im-studio .im-art-card:nth-child(3) { transform: translate(45px, 11px) rotate(13deg); }

        #im-studio .im-hero h1 { font-size: clamp(1.9rem, 9vw, 2.45rem); }
        #im-studio .im-hero-meta { gap: 0.4rem; margin-top: 0.8rem; }
        #im-studio .im-hero-meta > * { min-height: 32px; padding: 0.35rem 0.58rem; font-size: 0.76rem; }
        #im-studio .im-settings-panel { padding: 0.7rem; border-radius: 18px; }
        #im-studio .im-settings-panel > .im-block { padding-right: 0.2rem; padding-left: 0.2rem; }
        #im-studio .im-theme { gap: 0.35rem; padding-right: 0.38rem; padding-left: 0.38rem; }
        #im-studio .im-theme:has(input:checked) { padding-right: calc(0.38rem - 1px); padding-left: calc(0.38rem - 1px); }
        #im-studio .im-theme .nm { font-size: 0.8rem; }
        #im-studio .im-theme .ct { font-size: 0.68rem; }
        #im-studio .im-actions { padding-right: 0.2rem; padding-left: 0.2rem; }
        #im-studio .im-btn { padding-right: 0.45rem; padding-left: 0.45rem; font-size: 0.81rem; }
        #im-studio #im-preview { padding: 0.8rem; border-radius: 18px; }
        #im-studio .im-preview-heading { margin: -0.8rem -0.8rem 0.8rem; padding: 0.85rem 0.8rem 0.7rem; }
    }

    @media (max-width: 360px) {
        #im-studio { padding-right: 0.55rem; padding-left: 0.55rem; }
        #im-studio .im-theme { gap: 0.28rem; }
        #im-studio .im-theme input { width: 22px; height: 22px; }
        #im-studio .im-theme .em { font-size: 1.15rem; }
        #im-studio .im-theme .nm { font-size: 0.76rem; }
        #im-studio .im-theme .ct { font-size: 0.64rem; }
        #im-studio .im-actions { grid-template-columns: minmax(0, 1fr); }
    }

    @media (prefers-reduced-motion: reduce) {
        #im-studio *,
        #im-studio *::before,
        #im-studio *::after {
            scroll-behavior: auto !important;
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
        }
    }
}