/* Atelier maternelle — styles d'écran uniquement. Le papier généré reste intact. */
@media screen {
  #mat-studio {
    --mat-ink: #263b3a;
    --mat-muted: #607775;
    --mat-petrol: #176b67;
    --mat-petrol-deep: #10534f;
    --mat-sage: #dce9dc;
    --mat-sage-soft: #f0f5ed;
    --mat-apricot: #f6c9a5;
    --mat-cream: #fbf7ed;
    --mat-line: #d8e2d8;
    --mat-panel: #fffefa;
    --mat-shadow: 0 12px 32px rgb(38 59 58 / 8%);
    --mat-anchor-shortcut-height: 0px;
    box-sizing: border-box;
    width: min(100% - 2rem, 1400px);
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 2rem) 0 4rem;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 2vw, 1.6rem);
    align-items: start;
    color: var(--mat-ink);
  }

  #mat-studio,
  #mat-studio .mat-block,
  #mat-studio .mat-preview-heading,
  #mat-studio .mat-path-card,
  #mat-studio .mat-before-card,
  #mat-studio .mat-suite a {
    border-color: var(--mat-line);
  }

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

  #mat-studio .mat-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    border: 1px solid #d6e4d7;
    border-radius: 30px;
    background: radial-gradient(ellipse at 88% 8%, #f8dfc7 0, transparent 32%), linear-gradient(125deg, #f5f6e9, var(--mat-cream) 58%, #edf4e9);
    box-shadow: var(--mat-shadow);
    text-align: left;
  }

  #mat-studio .mat-hero-copy { min-width: 0; }
  #mat-studio .mat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .7rem;
    color: var(--mat-petrol-deep);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
  }
  #mat-studio .mat-hero h1 {
    max-width: 780px;
    margin: 0;
    color: var(--mat-ink);
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.04;
    letter-spacing: -.045em;
  }
  #mat-studio .mat-hero-copy > p:not(.mat-hint):not(.mat-eyebrow) {
    max-width: 760px;
    margin: 1rem 0 0;
    color: #526967;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.65;
  }
  #mat-studio .mat-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.2rem;
  }
  #mat-studio .mat-hero-meta > * {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: .35rem .75rem;
    border: 1px solid #cbded0;
    border-radius: 999px;
    background: rgb(255 255 255 / 66%);
    color: var(--mat-petrol-deep);
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
  }
  #mat-studio .mat-hero-meta a:hover,
  #mat-studio .mat-hero-meta a:focus-visible { background: #fff; border-color: var(--mat-petrol); }
  #mat-studio #mat-storage-note { min-height: 1.3em; margin: .65rem 0 0; color: var(--mat-muted); font-size: .82rem; }
  #mat-studio .mat-hero .mat-hint { margin: .4rem 0 0; color: #657b76; font-size: .78rem; }
  #mat-studio .mat-hero-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 190px;
    isolation: isolate;
  }
  #mat-studio .mat-art-piece { position: absolute; display: block; box-shadow: 0 14px 24px rgb(38 59 58 / 13%); }
  #mat-studio .mat-art-piece:nth-child(1) {
    width: 112px; height: 112px; border: 7px solid #fffdf5; border-radius: 28px;
    background: #77aaa0; transform: rotate(-12deg) translate(-20px, 8px); z-index: 1;
  }
  #mat-studio .mat-art-piece:nth-child(2) {
    width: 92px; height: 92px; border: 7px solid #fffdf5; border-radius: 50%;
    background: var(--mat-apricot); transform: translate(36px, -28px); z-index: 2;
  }
  #mat-studio .mat-art-piece:nth-child(3) {
    width: 0; height: 0; border-right: 52px solid transparent; border-bottom: 92px solid #d5a95f;
    border-left: 52px solid transparent; filter: drop-shadow(0 12px 12px rgb(38 59 58 / 13%));
    transform: rotate(13deg) translate(18px, 38px); z-index: 3;
  }

  #mat-studio .generator-workflow { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; background: transparent; }
  #mat-studio .generator-workflow a { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .9rem; border: 1px solid var(--mat-line); border-radius: 999px; background: var(--mat-panel); color: var(--mat-petrol-deep); font-weight: 750; text-decoration: none; }
  #mat-studio .generator-workflow a:hover { border-color: var(--mat-petrol); }

  #mat-studio :is(#mat-preparation, #mat-preview, #mat-download-actions, #mat-before, #mat-path-title, #mat-num-grid) {
    scroll-margin-top: calc(var(--generator-header-height, var(--site-header-height, 104px)) + var(--mat-anchor-shortcut-height) + 16px);
  }

  #mat-studio .mat-settings-panel { grid-column: 1; min-width: 0; }
  #mat-studio .mat-settings-panel > .mat-block,
  #mat-studio .mat-preparation,
  #mat-studio .mat-output,
  #mat-studio #mat-guidance,
  #mat-studio .mat-before,
  #mat-studio .mat-path,
  #mat-studio .mat-suite {
    box-sizing: border-box;
    border: 1px solid var(--mat-line);
    border-radius: 20px;
    background: var(--mat-panel);
    box-shadow: 0 6px 20px rgb(38 59 58 / 5%);
  }
  #mat-studio .mat-settings-panel > .mat-block,
  #mat-studio .mat-preparation,
  #mat-studio .mat-output {
    margin: 0 0 .85rem;
    padding: 1rem 1.1rem;
  }
  #mat-studio .mat-settings-panel > .mat-block h2,
  #mat-studio .mat-preparation h2,
  #mat-studio .mat-output h2,
  #mat-studio #mat-guidance h2 {
    margin: 0 0 .35rem;
    color: var(--mat-petrol-deep);
    font-size: 1.04rem;
    line-height: 1.25;
  }
  #mat-studio .mat-settings-panel > .mat-block .mat-sub,
  #mat-studio .mat-preparation .mat-sub,
  #mat-studio .mat-output .mat-sub { margin: 0 0 .75rem; color: var(--mat-muted); line-height: 1.45; }
  #mat-studio .mat-preparation { border-top: 4px solid #d1a35f; }
  #mat-studio .mat-output { border-top: 4px solid var(--mat-petrol); }
  #mat-studio .mat-field > label,
  #mat-studio .mat-field > .mat-field-label { color: var(--mat-ink); }
  #mat-studio .mat-field select,
  #mat-studio .mat-field input[type="text"],
  #mat-studio .mat-field input[type="number"],
  #mat-studio .mat-path-actions select {
    min-height: 44px;
    border: 1px solid #b8ccc2;
    border-radius: 11px;
    background: #fff;
    color: var(--mat-ink);
  }
  #mat-studio .mat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
  #mat-studio .mat-row .mat-field { min-width: 0; }
  #mat-studio .mat-row .mat-field:first-child { grid-column: 1 / -1; }
  #mat-studio .mat-field :is(select, input[type="text"], input[type="number"]) { box-sizing: border-box; width: 100%; }

  #mat-studio .mat-seg { border-color: #b8ccc2; }
  #mat-studio .mat-seg button { color: var(--mat-petrol-deep); }
  #mat-studio .mat-seg button.active,
  #mat-studio .mat-btn { background: var(--mat-petrol); color: #fff; }
  #mat-studio .mat-btn { max-width: 100%; min-height: 46px; border-radius: 12px; box-shadow: 0 4px 10px rgb(23 107 103 / 15%); }
  #mat-studio .mat-btn:hover:not([disabled]) { background: var(--mat-petrol-deep); }
  #mat-studio .mat-btn.secondary { border: 1px solid #b9d0c4; background: var(--mat-sage-soft); color: var(--mat-petrol-deep); box-shadow: none; }
  #mat-studio .mat-actions { gap: .55rem; }
  #mat-studio .mat-check { min-height: 44px; }
  #mat-studio .mat-ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  #mat-studio .mat-ex {
    box-sizing: border-box;
    min-height: 64px;
    align-items: center;
    gap: .55rem;
    padding: .55rem .65rem;
    border: 1px solid #cad9ce;
    border-radius: 13px;
    background: #f8faf5;
  }
  #mat-studio .mat-ex.active { border-color: #55958a; background: #e4f0e7; }
  #mat-studio .mat-ex input { width: 24px; height: 24px; margin: 0; accent-color: var(--mat-petrol); }
  #mat-studio .mat-ex .em { font-size: 1.25rem; }
  #mat-studio .mat-ex .lab { min-width: 0; }
  #mat-studio .mat-ex .nm { color: var(--mat-ink); font-size: .83rem; line-height: 1.2; }
  #mat-studio .mat-ex .lv { color: #5d716d; font-size: .66rem; }
  #mat-studio .mat-ex.active .nm { color: #1d3936; }
  #mat-studio .mat-ex.active .lv { color: #36534d; }

  #mat-studio #mat-preview {
    grid-column: 2;
    position: static;
    box-sizing: border-box;
    min-width: 0;
    min-height: 480px;
    max-height: 72vh;
    overflow: auto;
    padding: 1rem;
    border: 1px solid #cfddd2;
    border-radius: 22px;
    background: #edf3e9;
    box-shadow: var(--mat-shadow);
    overscroll-behavior: contain;
  }
  #mat-studio .mat-preview-heading {
    position: sticky;
    z-index: 2;
    top: -1rem;
    margin: -1rem -1rem 1rem;
    padding: 1rem 1.2rem .9rem;
    border-width: 0 0 1px;
    border-style: solid;
    border-radius: 22px 22px 0 0;
    background: rgb(251 247 237 / 96%);
    backdrop-filter: blur(10px);
  }
  #mat-studio #mat-preview .mat-preview-heading,
  #mat-studio #mat-preview .mat-preview-heading :is(p, h2) { color: var(--mat-ink) !important; }
  #mat-studio #mat-preview .mat-preview-heading .mat-eyebrow { color: var(--mat-petrol-deep) !important; }
  #mat-studio .mat-preview-heading h2 { margin: 0; color: var(--mat-ink); font-size: 1.15rem; }
  #mat-studio .mat-preview-heading .mat-eyebrow { margin-bottom: .2rem; font-size: .67rem; }

  #mat-studio .mat-before { padding: 1rem 1.15rem; border-left: 4px solid #8dae83; }
  #mat-studio .mat-before > summary { color: var(--mat-petrol-deep); }
  #mat-studio .mat-before > summary:focus-visible { outline-color: #176b67; }
  #mat-studio .mat-before-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
  #mat-studio .mat-before-card { border-color: #d5e2d7; border-radius: 14px; background: #f6f8f1; }
  #mat-studio .mat-before-card dt { color: var(--mat-petrol-deep); }
  #mat-studio .mat-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
  #mat-studio .mat-paths-title { grid-column: 1 / -1; margin: 0; color: var(--mat-ink); font-size: 1.45rem; letter-spacing: -.02em; }
  #mat-studio .mat-path { min-width: 0; margin: 0; padding: 1rem; border-top: 4px solid var(--mat-petrol); }
  #mat-studio .mat-path.mat-spatial { border-top-color: #8eaa74; }
  #mat-studio .mat-path.mat-motifs { border-top-color: #d49a69; }
  #mat-studio .mat-path > h2,
  #mat-studio .mat-path > h2[id] { color: var(--mat-petrol-deep); scroll-margin-top: max(160px, var(--generator-header-height, 0px)); }
  #mat-studio .mat-path-card { border-radius: 14px; background: #f8faf5; }
  #mat-studio .mat-path-meta span { border-color: #cbdccf; background: #f1f6ed; color: #35534e; }
  #mat-studio .mat-path-steps { columns: 1; padding-left: 1.2rem; }
  #mat-studio .mat-path-actions { align-items: stretch; }
  #mat-studio .mat-path-actions > a { color: var(--mat-petrol-deep); }
  #mat-studio .mat-path-status { color: var(--mat-petrol-deep); }
  #mat-studio #mat-guidance { padding: 1rem 1.15rem; border-left: 4px solid #d49a69; }
  #mat-studio .mat-suite { padding: 1.1rem; }
  #mat-studio .mat-suite > h2 { margin-top: 0; color: var(--mat-petrol-deep); }
  #mat-studio .mat-suite a { border-radius: 14px; background: #f7f9f2; }
  #mat-studio .mat-suite a:hover,
  #mat-studio .mat-suite a:focus-visible { border-color: var(--mat-petrol); background: #edf5e9; }
  #mat-studio .mat-suite .t { color: var(--mat-petrol-deep); }
  #mat-studio a:focus-visible,
  #mat-studio button:focus-visible,
  #mat-studio input:focus-visible,
  #mat-studio select:focus-visible,
  #mat-studio summary:focus-visible,
  #mat-studio #mat-preview:focus-visible { outline: 3px solid #c26e36; outline-offset: 3px; }
  #mat-studio a,
  #mat-studio button,
  #mat-studio input,
  #mat-studio select,
  #mat-studio summary { scroll-margin-block: 1rem; }

  html[data-theme="dark"] #mat-studio {
    --mat-ink: #e6eee7;
    --mat-muted: #b6c8c0;
    --mat-petrol: #62b8a8;
    --mat-petrol-deep: #a7d9ca;
    --mat-sage: #29443c;
    --mat-sage-soft: #243b35;
    --mat-line: #3d5750;
    --mat-panel: #1e302d;
    --mat-shadow: 0 12px 32px rgb(0 0 0 / 22%);
  }
  html[data-theme="dark"] #mat-studio .mat-hero {
    border-color: #405a50;
    background: radial-gradient(ellipse at 88% 8%, rgb(190 126 77 / 17%) 0, transparent 34%), linear-gradient(125deg, #243a34, #273a36 58%, #2a4036);
  }
  html[data-theme="dark"] #mat-studio .mat-hero-copy > p:not(.mat-hint):not(.mat-eyebrow),
  html[data-theme="dark"] #mat-studio .mat-hero .mat-hint { color: #bfd0c6; }
  html[data-theme="dark"] #mat-studio .mat-hero-meta > * { border-color: #506b60; background: #263c36; color: #d5eee0; }
  html[data-theme="dark"] #mat-studio .mat-settings-panel > .mat-block,
  html[data-theme="dark"] #mat-studio .mat-preparation,
  html[data-theme="dark"] #mat-studio .mat-output,
  html[data-theme="dark"] #mat-studio #mat-guidance,
  html[data-theme="dark"] #mat-studio .mat-before,
  html[data-theme="dark"] #mat-studio .mat-path,
  html[data-theme="dark"] #mat-studio .mat-suite { background: var(--mat-panel); }
  html[data-theme="dark"] #mat-studio .mat-field select,
  html[data-theme="dark"] #mat-studio .mat-field input[type="text"],
  html[data-theme="dark"] #mat-studio .mat-field input[type="number"],
  html[data-theme="dark"] #mat-studio .mat-path-actions select { border-color: #597269; background: #172723; color: #edf5ed; }
  html[data-theme="dark"] #mat-studio .mat-ex { border-color: #4e685e; background: #263b35; }
  html[data-theme="dark"] #mat-studio .mat-ex.active { border-color: #75b9a8; background: #294a41; }
  html[data-theme="dark"] #mat-studio .mat-ex .nm,
  html[data-theme="dark"] #mat-studio .mat-ex.active .nm { color: #edf5ed; }
  html[data-theme="dark"] #mat-studio .mat-ex .lv,
  html[data-theme="dark"] #mat-studio .mat-ex.active .lv { color: #c5d7ce; }
  html[data-theme="dark"] #mat-studio #mat-preview { border-color: #405a50; background: #223530; }
  html[data-theme="dark"] #mat-studio .mat-preview-heading { border-color: #405a50; background: rgb(30 48 45 / 96%); }
  html[data-theme="dark"] #mat-studio .mat-before-card,
  html[data-theme="dark"] #mat-studio .mat-path-card,
  html[data-theme="dark"] #mat-studio .mat-suite a { border-color: #405a50; background: #253a35; }
  html[data-theme="dark"] #mat-studio .mat-before-card h3,
  html[data-theme="dark"] #mat-studio .mat-before-card dd,
  html[data-theme="dark"] #mat-studio .mat-path-card h3,
  html[data-theme="dark"] #mat-studio .mat-path-card p,
  html[data-theme="dark"] #mat-studio .mat-suite .d { color: #d1dfd6; }
  html[data-theme="dark"] #mat-studio .mat-path-meta span { border-color: #4e685e; background: #294139; color: #d7ebe0; }
  html[data-theme="dark"] #mat-studio .mat-btn,
  html[data-theme="dark"] #mat-studio .mat-seg button.active { color: #112e29; }
  html[data-theme="dark"] #mat-studio .mat-btn.secondary { border-color: #597269; background: #294139; color: #dcf1e6; }
  html[data-theme="dark"] #mat-studio .mat-suite a:hover,
  html[data-theme="dark"] #mat-studio .mat-suite a:focus-visible { background: #304a40; }

  @media (max-width: 1100px) {
    #mat-studio .mat-paths { grid-template-columns: 1fr; }
    #mat-studio .mat-paths-title { grid-column: auto; }
  }
  @media (max-width: 900px) {
    #mat-studio { --mat-anchor-shortcut-height: var(--generator-shortcut-height, 0px); }
    #mat-studio { width: min(100% - 1.25rem, 760px); grid-template-columns: minmax(0, 1fr); }
    #mat-studio .mat-settings-panel,
    #mat-studio #mat-preview { grid-column: 1; }
    #mat-studio #mat-preview { min-height: 420px; max-height: 72vh; }
    #mat-studio .mat-hero { grid-template-columns: minmax(0, 1fr) 130px; }
    #mat-studio .mat-hero-art { min-height: 150px; transform: scale(.82); }
  }
  @media (max-width: 560px) {
    #mat-studio { width: min(100% - 1rem, 100%); gap: .8rem; padding-top: .65rem; }
    #mat-studio .mat-hero { grid-template-columns: minmax(0, 1fr); padding: 1.35rem; border-radius: 22px; }
    #mat-studio .mat-hero-art { position: absolute; right: -12px; bottom: -25px; width: 115px; min-height: 120px; opacity: .55; transform: scale(.65); }
    #mat-studio .mat-hero-copy { position: relative; z-index: 1; }
    #mat-studio .mat-hero h1 { max-width: 12ch; font-size: clamp(1.9rem, 10vw, 2.5rem); }
    #mat-studio .mat-hero-copy > p:not(.mat-hint):not(.mat-eyebrow) { max-width: 40ch; font-size: .98rem; }
    #mat-studio .mat-hero-meta { gap: .4rem; }
    #mat-studio .mat-hero-meta > * { min-height: 40px; font-size: .76rem; }
    #mat-studio .mat-settings-panel > .mat-block,
    #mat-studio .mat-preparation,
    #mat-studio .mat-output { padding: .85rem; border-radius: 16px; }
    #mat-studio .mat-row { grid-template-columns: minmax(0, 1fr); }
    #mat-studio .mat-ex-grid { grid-template-columns: minmax(0, 1fr); gap: .4rem; }

    #mat-studio .mat-ex { min-height: 62px; gap: .35rem; padding: .45rem; }
    #mat-studio .mat-ex .em { font-size: 1.1rem; }
    #mat-studio .mat-ex .nm { font-size: .77rem; }
    #mat-studio .mat-ex .lv { font-size: .6rem; }
    #mat-studio #mat-preview { min-height: 360px; max-height: 68vh; padding: .7rem; border-radius: 17px; }
    #mat-studio .mat-preview-heading { top: -.7rem; margin: -.7rem -.7rem .75rem; padding: .75rem .85rem; border-radius: 17px 17px 0 0; }
    #mat-studio .mat-path { padding: .85rem; }
    #mat-studio .mat-path-steps { columns: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    #mat-studio > :not(#mat-preview),
    #mat-studio > :not(#mat-preview) *,
    #mat-studio > :not(#mat-preview) *::before,
    #mat-studio > :not(#mat-preview) *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }

  html.oplc-projection-mode #mat-studio {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  html.oplc-projection-mode #mat-studio > :not(#mat-preview) { display: none !important; }
  html.oplc-projection-mode #mat-studio #mat-preview {
    position: static;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html.oplc-projection-mode #mat-studio .mat-preview-heading { display: none !important; }
}