/* Shared foundations. Page layouts are added in step 2. */
:root {
  --ct-primary: #6945b8;
  --ct-secondary: #21877f;
  --ct-accent: #f3c85b;
  --ct-pink: #db79a3;
  --ct-ink: #242336;
  --ct-muted: #646477;
  --ct-surface: #ffffff;
  --ct-soft: #f7f5fc;
  --ct-border: #e8e4ef;
  --ct-font-body: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --ct-font-heading: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --ct-content-width: 1200px;
  --ct-radius: 20px;
  --ct-shadow: 0 6px 24px rgb(47 33 83 / 6%);
  --ct-space: clamp(20px, 4vw, 48px);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ct-surface); color: var(--ct-ink); font-family: var(--ct-font-body); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; height: auto; }
a { color: var(--ct-primary); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--ct-secondary); outline-offset: 5px; }
h1, h2, h3 { font-family: var(--ct-font-heading); line-height: 1.2; letter-spacing: -.035em; }
h1 { font-size: clamp(32px, 4.2vw, 58px); }
h2 { font-size: clamp(25px, 3vw, 36px); }
.ct-container { width: min(var(--ct-content-width), calc(100% - 2 * var(--ct-space))); margin-inline: auto; }
.ct-section { padding-block: clamp(36px, 6vw, 80px); min-height: 60vh; }
.ct-color-strip { height: 4px; background: linear-gradient(90deg, var(--ct-primary) 0 25%, var(--ct-accent) 25% 50%, var(--ct-secondary) 50% 75%, var(--ct-pink) 75%); }
.ct-header { border-bottom: 1px solid var(--ct-border); background: var(--ct-surface); }
.ct-header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 15px; }
.ct-brand { display: inline-flex; align-items: center; gap: 10px; font: 800 clamp(22px, 3vw, 28px)/1 var(--ct-font-heading); letter-spacing: -.045em; text-decoration: none; color: var(--ct-ink); }
.ct-brand img { width: 44px; height: 44px; }
.ct-custom-logo img { width: auto; max-height: 60px; }
.ct-nav-list, .ct-footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; padding: 0; margin: 0; }
.ct-nav a { color: var(--ct-ink); text-decoration: none; }
.ct-nav a:hover, .ct-nav a:focus-visible { color: var(--ct-primary); text-decoration: underline; }
.ct-panel { padding: clamp(24px, 4vw, 42px); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow); margin-bottom: 24px; }
.ct-prose { overflow-wrap: anywhere; }
.ct-prose > :first-child { margin-top: 0; }
.ct-prose > :last-child { margin-bottom: 0; }
.ct-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: 999px; background: var(--ct-primary); color: white; text-decoration: none; font-weight: 700; cursor: pointer; }
.ct-button--outline { background: transparent; color: var(--ct-primary); border-color: currentColor; }
.ct-footer { background: var(--ct-soft); border-top: 1px solid var(--ct-border); color: var(--ct-muted); font-size: 14px; }
.ct-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 28px; }
.ct-skip-link { position: fixed; top: -150px; left: 16px; background: var(--ct-ink); color: white; padding: 12px 18px; z-index: 1000; }
.ct-skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .ct-button { transition: background-color .15s ease, box-shadow .15s ease; }
  .ct-button:hover { box-shadow: 0 4px 14px rgb(47 33 83 / 18%); }
}
@media print {
  .ct-header, .ct-footer, .ct-color-strip, .ct-skip-link { display: none; }
  body { color: black; background: white; }
  .ct-panel { border: 0; box-shadow: none; }
}
/* Catalogue, navigation and page templates — step 2. */
.ct-icon { width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle; }
.ct-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ct-header { border: 0; }
.ct-header-inner { flex-wrap: nowrap; min-height: 88px; gap: 30px; }
.ct-nav { margin-right: auto; }
.ct-nav-list { align-items: center; gap: 26px; font-size: 15px; font-weight: 700; }
.ct-header-actions { display: flex; align-items: center; gap: 12px; }
.ct-icon-button { display: inline-flex; justify-content: center; align-items: center; width: 42px; height: 42px; border: 1px solid transparent; background: var(--ct-soft); color: var(--ct-ink); border-radius: 50%; cursor: pointer; text-decoration: none; }
.ct-menu-toggle { display: none; }
.ct-account-link { min-height: 42px; padding: 9px 17px; border-radius: 13px; gap: 8px; font-size: 14px; }
.ct-brand { white-space: nowrap; }
.ct-popular-menu { position: relative; }
.ct-popular-menu summary { cursor: pointer; }
.ct-popular-menu > div { position: absolute; top: 36px; left: -20px; width: 330px; padding: 24px; background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: 18px; box-shadow: var(--ct-shadow); z-index: 10; }
.ct-popular-menu .ct-pills { margin: 0; }
.ct-popular-menu .ct-pills > span { display: none; }
.ct-nav .sub-menu { list-style: none; padding-left: 14px; }
.ct-hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 64px; padding-block: 60px 90px; }
.ct-hero h1 { margin: 15px 0 24px; font-weight: 900; line-height: 1.15; }
.ct-hero-copy > p:not(.ct-eyebrow) { font-size: 18px; color: var(--ct-muted); max-width: 590px; }
.ct-eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 800; color: color-mix(in srgb, var(--ct-secondary), #000 18%); margin: 0 0 12px; }
mark { color: var(--ct-primary); background: linear-gradient(transparent 68%, #f7e6ae 68% 93%, transparent 93%); padding: 0 .02em; }
.ct-hero-art { position: relative; height: 510px; min-width: 0; }
.ct-hero-sheet { display: flex; flex-direction: column; position: absolute; width: 62%; padding: 16px; background: white; color: #242336; border: 2px solid #302c39; border-radius: 20px; box-shadow: 6px 7px 0 var(--ct-accent); text-decoration: none; }
.ct-hero-sheet img { width: 100%; height: 240px; object-fit: contain; }
.ct-hero-sheet span { font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-top: 10px; }
.ct-hero-sheet--0 { top: 95px; left: 0; transform: rotate(-8deg); }
.ct-hero-sheet--1 { top: 40px; right: 0; transform: rotate(7deg); box-shadow: 6px 7px 0 var(--ct-secondary); }
.ct-hero-sheet--2 { bottom: -10px; right: 10%; width: 53%; transform: rotate(-4deg); box-shadow: 6px 7px 0 var(--ct-pink); }
.ct-hero-sheet--2 img { height: 200px; }
.ct-hero-spark { position: absolute; bottom: 25px; left: 5%; font-size: 65px; color: var(--ct-accent); }
.ct-search-form { display: flex; gap: 12px; margin: 28px 0 22px; }
.ct-search-input { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; border: 1.5px solid var(--ct-ink); border-radius: 999px; background: var(--ct-surface); padding: 12px 20px; box-shadow: 3px 4px 0 var(--ct-accent); }
.ct-search-input .ct-icon { color: var(--ct-muted); width: 19px; }
.ct-search-input input { width: 100%; min-width: 0; padding: 2px 0; border: 0; outline: none; background: transparent; color: var(--ct-ink); font-size: 15px; }
.ct-search-input:focus-within { outline: 3px solid var(--ct-secondary); outline-offset: 3px; }
.ct-search-input input:focus-visible { outline: none; }
.ct-search-form .ct-button { padding-inline: 23px; }
.ct-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 20px 0 30px; font-size: 13px; }
.ct-pills > span { color: var(--ct-muted); margin-right: 3px; }
.ct-pills a { text-decoration: none; color: var(--ct-ink); font-weight: 600; background: var(--ct-soft); border: 1px solid var(--ct-border); border-radius: 99px; padding: 7px 15px; }
.ct-pills a:nth-of-type(3n+1) { background: #f5eaf2; }
.ct-pills a:nth-of-type(3n+2) { background: #fbf2d8; }
.ct-pills a:nth-of-type(3n) { background: #e8f4f0; }
.ct-pills a:hover { border-color: var(--ct-primary); }
.ct-section-block { padding-block: 66px; }
.ct-section-block > h2 { margin: 0 0 28px; }
.ct-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.ct-section-heading h2 { margin: 0; }
.ct-section-heading p:not(.ct-eyebrow) { color: var(--ct-muted); margin: 12px 0 0; }
.ct-text-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; text-decoration: none; font-size: 14px; background: none; border: 0; color: var(--ct-primary); padding: 0; cursor: pointer; }
.ct-section-heading .ct-text-link { flex-shrink: 0; }
.ct-band--peach { background: #fcf4ef; }
.ct-band--mint { background: #edf6f2; }
.ct-band--lavender { background: #f6f3fc; }
.ct-drawing-grid, .ct-category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.ct-drawing-card { min-width: 0; background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: 18px; overflow: hidden; box-shadow: 0 3px 14px rgb(47 33 83 / 4%); }
.ct-drawing-link { display: block; color: var(--ct-ink); text-decoration: none; height: 100%; }
.ct-drawing-art { padding: 28px 18px 12px; position: relative; background: white; }
.ct-drawing-art img { display: block; width: 100%; height: 230px; object-fit: contain; }
.ct-drawing-card h3 { margin: 0; padding: 18px; border-top: 1px solid var(--ct-border); font: 700 15px/1.5 var(--ct-font-body); letter-spacing: -.01em; }
.ct-drawing-card:hover { border-color: var(--ct-primary); }
.ct-level { position: absolute; top: 10px; left: 11px; border-radius: 99px; background: #fff; padding: 3px 7px; font-size: 10px; line-height: 1.4; color: #5d5e69; border: 1px solid #eee; }
.ct-level > span { color: #78a98c; font-size: 8px; letter-spacing: -2px; padding-right: 4px; }
.ct-level--moyen > span { color: #c59540; }
.ct-level--difficile > span { color: #ba659a; }
.ct-category-card { text-decoration: none; color: var(--ct-ink); border-radius: 18px; overflow: hidden; border: 1px solid var(--ct-border); background: var(--ct-surface); }
.ct-category-art { position: relative; padding: 24px; background: #f8f5fc; }
.ct-category-card:nth-child(3n+2) .ct-category-art { background: #edf6f2; }
.ct-category-card:nth-child(3n) .ct-category-art { background: #fbf5e9; }
.ct-category-art img { display: block; width: 100%; height: 200px; object-fit: contain; mix-blend-mode: multiply; }
.ct-category-card h3 { font-size: 19px; margin: 0; padding: 20px; }
.ct-count { position: absolute; bottom: 12px; right: 12px; background: white; border-radius: 99px; padding: 3px 10px; font-size: 11px; color: #646477; }
.ct-online-promo { padding-block: 65px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.ct-online-promo h2 { font-size: clamp(32px,4vw,48px); margin: 0 0 20px; }
.ct-online-promo p:not(.ct-eyebrow) { color: var(--ct-muted); max-width: 500px; }
.ct-online-promo .ct-button { gap: 12px; margin-top: 15px; }
.ct-promo-art { position: relative; width: min(100%,350px); margin-inline: auto; padding: 24px; background: white; border: 2px solid #302c39; border-radius: 20px; box-shadow: 8px 8px 0 #b9dacf; transform: rotate(4deg); }
.ct-promo-art img { display: block; height: 300px; object-fit: contain; margin: auto; }
.ct-palette { display: flex; justify-content: center; gap: 12px; border-top: 1px solid #eee; padding-top: 16px; margin-top: 15px; }
.ct-palette i { width: 24px; height: 24px; background: var(--ct-primary); border-radius: 50%; }
.ct-palette i:nth-child(2) { background: var(--ct-secondary); }.ct-palette i:nth-child(3) { background: var(--ct-accent); }.ct-palette i:nth-child(4) { background: var(--ct-pink); }.ct-palette i:nth-child(5) { background: #89b9e8; }
.ct-gallery-empty { padding: 35px; border-radius: 20px; background: var(--ct-soft); text-align: center; color: var(--ct-muted); }
.ct-gallery-empty > span { display: block; color: var(--ct-pink); font-size: 34px; }
.ct-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; margin-top: 45px; }
.ct-steps > div { position: relative; padding-left: 55px; }
.ct-steps > div > span { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 36px; height: 36px; background: #f1eaf9; border-radius: 50%; color: var(--ct-primary); font-weight: 800; }
.ct-steps h3 { margin: 0 0 8px; font-size: 19px; }.ct-steps p { margin: 0; color: var(--ct-muted); font-size: 14px; }
.ct-benefits { padding-block: 60px; display: grid; grid-template-columns: repeat(4,1fr); gap: 35px; border-bottom: 1px solid var(--ct-border); }
.ct-benefits .ct-icon { color: var(--ct-primary); width: 28px; height: 28px; }.ct-benefits h3 { margin: 16px 0 8px; font-size: 19px; }.ct-benefits p { margin: 0; font-size: 14px; color: var(--ct-muted); }
.ct-about { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 75px; }.ct-about .ct-eyebrow { grid-column: 1/-1; }.ct-about h2 { font-size: 42px; margin: 0; }.ct-about > div { color: var(--ct-muted); }.ct-about > div > p:first-child { margin-top: 0; }
.ct-footer-top { padding-block: 40px 22px; display: flex; justify-content: space-between; gap: 30px; }.ct-footer-top p { margin: 12px 0; }.ct-footer-inner { border-top: 1px solid var(--ct-border); font-size: 12px; }.ct-footer-links { gap: 18px; }.ct-footer-links a { color: var(--ct-muted); text-decoration: none; }
.ct-back-top { position: fixed; bottom: 20px; right: 20px; box-shadow: var(--ct-shadow); background: var(--ct-surface); border-color: var(--ct-border); font-size: 24px; z-index: 8; }
.ct-breadcrumb { padding-top: 24px; color: var(--ct-muted); font-size: 12px; }.ct-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }.ct-breadcrumb li+li::before { content:'›'; margin-right: 10px; color: var(--ct-muted); }.ct-breadcrumb a { color: inherit; text-decoration: none; }
.ct-page-heading { padding-block: 45px 20px; text-align: center; }.ct-page-heading h1 { font-size: clamp(32px,4vw,48px); margin: 0 0 15px; }.ct-page-heading > p { color: var(--ct-muted); max-width: 940px; margin: 20px auto; }.ct-page-subtitle { font-size: 21px; font-weight: 700; }.ct-heading-rule { width: 50px; height: 4px; background: var(--ct-accent); border-radius: 4px; margin: 18px auto 30px; }.ct-term-intro { color: var(--ct-muted); }.ct-heading-count { font-family: var(--ct-font-body); letter-spacing: 0; font-size: 17px; color: var(--ct-muted); font-weight: 500; white-space: nowrap; margin-left: 8px; }
.ct-filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-radius: 15px; background: var(--ct-soft); padding: 15px 20px; margin-bottom: 25px; font-size: 13px; color: var(--ct-muted); }.ct-filter-bar p { margin: 0; }.ct-theme-select { display: flex; align-items: center; gap: 12px; }.ct-theme-select select { max-width: 230px; border: 1px solid var(--ct-border); border-radius: 99px; background: var(--ct-surface); color: var(--ct-ink); padding: 10px 18px; }
.ct-editorial { max-width: 900px; }.ct-editorial p { color: var(--ct-muted); }.ct-editorial h2:not(:first-child) { margin-top: 38px; }.ct-page-heading .ct-search-form { max-width: 700px; margin-inline: auto; }
.ct-detail-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; margin-top: 35px; }.ct-preview-panel { background: var(--ct-soft); border-radius: 20px; padding: 25px; }.ct-print-sheet { display: flex; flex-direction: column; aspect-ratio: 210/297; padding: 22px; background: white; color: #242336; border: 3px double var(--ct-primary); box-shadow: 0 6px 22px #0000000a; }.ct-print-sheet > img { flex: 1; width: 100%; min-height: 0; object-fit: contain; }.ct-name-line { font-size: 10px; color: #777; text-align: center; margin: 0 0 12px; }.ct-sheet-brand { font-size: 9px; text-align: center; margin-top: 12px; color: #777; }.ct-preview-caption { font-size: 12px; text-align: center; color: var(--ct-muted); margin: 18px 0 0; }.ct-download-panel { padding: 30px; }.ct-download-panel h2 { font-size: 28px; margin: 0 0 18px; }.ct-download-panel > p { font-size: 15px; color: var(--ct-muted); }.ct-frame-picker { padding: 0; margin: 25px 0; border: 0; display: flex; gap: 10px; }.ct-frame-picker legend { font-size: 13px; margin-bottom: 10px; color: var(--ct-muted); }.ct-swatch { position: relative; cursor: pointer; display: inline-flex; }.ct-swatch input { position: absolute; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }.ct-swatch-dot { width: 29px; height: 29px; border-radius: 50%; display: block; background: var(--swatch); border: 2px solid white; box-shadow: 0 0 0 1px #ddd; }.ct-swatch input:checked ~ .ct-swatch-dot { box-shadow: 0 0 0 2px var(--ct-ink); }.ct-swatch input:focus-visible ~ .ct-swatch-dot { outline: 3px solid var(--ct-secondary); outline-offset: 4px; }.ct-swatch--violet { --swatch:#6945b8; }.ct-swatch--jaune { --swatch:#f3c85b; }.ct-swatch--turquoise { --swatch:#21877f; }.ct-swatch--rose { --swatch:#db79a3; }.ct-swatch--noir { --swatch:#242336; }.ct-swatch--aucun { --swatch:white; }.ct-swatch--aucun .ct-swatch-dot { background: linear-gradient(135deg,#fff 46%,#db79a3 47% 53%,#fff 54%); }
.ct-print-sheet[data-frame=jaune] { border-color: #c5a142; }.ct-print-sheet[data-frame=turquoise] { border-color: #21877f; }.ct-print-sheet[data-frame=rose] { border-color: #db79a3; }.ct-print-sheet[data-frame=noir] { border-color: #242336; }.ct-print-sheet[data-frame=aucun] { border-color: transparent; }
.ct-wide { display: flex; width: 100%; margin-bottom: 12px; gap: 10px; border-radius: 14px; font-size: 14px; }.ct-button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }.ct-small { font-size: 12px !important; }.ct-muted { color: var(--ct-muted); }.ct-editor-link { display: flex; align-items: center; gap: 15px; color: var(--ct-primary); border-block: 1px solid var(--ct-border); padding-block: 22px; margin-block: 25px; text-decoration: none; font-size: 16px; font-weight: 700; }.ct-editor-link > .ct-icon:last-child { margin-left: auto; }.ct-editor-link small { display: block; font-weight: 400; font-size: 12px; color: var(--ct-muted); }.ct-editor-placeholder { padding: 45px; background: var(--ct-soft); margin-bottom: 40px; }.ct-editor-placeholder .ct-button { margin-top: 15px; gap: 10px; }.ct-empty { padding: 40px; text-align: center; background: var(--ct-soft); border-radius: 18px; }.ct-art-placeholder { height: 230px; display: grid; place-items: center; color: var(--ct-muted); }.ct-error-page { max-width: 800px; }
.ct-dialog { width: min(650px,calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 44px 32px 30px; border: 1px solid var(--ct-border); border-radius: 24px; background: var(--ct-surface); color: var(--ct-ink); box-shadow: 0 20px 90px #0002; }.ct-dialog::backdrop { background: #24233680; backdrop-filter: blur(4px); }.ct-dialog-close { position: absolute; right: 14px; top: 14px; }.ct-dialog h2 { font-size: 28px; }.navigation.pagination { margin: 35px 0; }.nav-links { display: flex; flex-wrap: wrap; gap: 10px; }.page-numbers { padding: 8px 15px; background: var(--ct-soft); border-radius: 12px; text-decoration: none; }.page-numbers.current { background: var(--ct-primary); color: white; }
html[data-theme=dark] { color-scheme: dark; --ct-ink:#f1edf7; --ct-muted:#b9b4c7; --ct-surface:#211e2b; --ct-soft:#2b2638; --ct-border:#423a52; --ct-primary:#bca2f4; --ct-secondary:#74c6bc; }
html[data-theme=dark] .ct-band--peach, html[data-theme=dark] .ct-band--mint, html[data-theme=dark] .ct-band--lavender { background: #292333; }
html[data-theme=dark] mark { background: linear-gradient(transparent 68%,#57452b 68% 93%,transparent 93%); }
html[data-theme=dark] .ct-pills a { background: #373041; }
html[data-theme=dark] .ct-button:not(.ct-button--outline) { color: #211e2b; }
html[data-theme=dark] .ct-steps > div > span { background: #3b304e; }
@media (max-width:1100px) { .ct-header-inner { gap: 20px; }.ct-nav-list { gap: 15px; }.ct-brand { font-size: 24px; }.ct-account-link span { display:none; }.ct-hero { gap: 35px; }.ct-hero-art { height: 470px; }.ct-hero-sheet img { height: 200px; }.ct-hero-sheet--2 img { height: 180px; }.ct-drawing-grid,.ct-category-grid { gap: 18px; }.ct-drawing-art img { height: 200px; } }
@media (max-width:900px) { .ct-menu-toggle { display:inline-flex; margin-left:auto; }.ct-header-inner { position: relative; flex-wrap: wrap; gap: 12px; }.ct-nav { display:none; order: 4; flex-basis:100%; margin:0; padding-block: 15px; }.ct-nav.is-open { display:block; }.ct-nav-list { align-items: stretch; flex-direction: column; gap: 0; }.ct-nav-list > li { padding:10px 0; }.ct-popular-menu > div { position:static; width:100%; box-shadow:none; margin-top:15px; }.ct-hero { padding-top:40px; gap:25px; }.ct-hero-art { height:420px; }.ct-hero-sheet { padding:10px; width:68%; }.ct-hero-sheet img { height:180px; }.ct-hero-sheet--2 img { height:150px; }.ct-hero-sheet--2 { width:58%; }.ct-hero-copy > p:not(.ct-eyebrow) { font-size:16px; }.ct-hero .ct-search-form { flex-wrap:wrap; }.ct-hero .ct-search-form .ct-button { width:100%; }.ct-drawing-grid,.ct-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.ct-benefits { grid-template-columns:repeat(2,1fr); }.ct-online-promo { gap:50px; }.ct-detail-layout { gap:24px; grid-template-columns:1.1fr 1fr; }.ct-download-panel { padding:22px; }.ct-filter-bar { align-items:flex-start; flex-direction:column; }.ct-about { gap:15px 35px; } }
@media (max-width:650px) { :root { --ct-space:20px; }.ct-header-inner { min-height:76px; }.ct-brand { font-size:23px; gap:7px; }.ct-brand img { width:36px; height:36px; }.ct-header-actions { gap:5px; }.ct-account-link { display:none; }.ct-icon-button { width:38px; height:38px; }.ct-hero { grid-template-columns:1fr; padding-block:35px 55px; gap:20px; }.ct-hero h1 { font-size:42px; }.ct-hero-art { height:360px; width:min(100%,400px); margin:auto; }.ct-hero-sheet { width:58%; }.ct-hero-sheet--0 { top:45px; }.ct-hero-sheet--1 { top:10px; }.ct-hero-sheet--2 { bottom:0; width:53%; }.ct-hero-sheet img { height:170px; }.ct-hero-sheet--2 img { height:150px; }.ct-hero-spark { font-size:45px; bottom:25px; }.ct-hero .ct-search-form { flex-wrap:nowrap; }.ct-hero .ct-search-form .ct-button { width:auto; }.ct-search-form { gap:8px; }.ct-search-input { padding-inline:13px; gap:7px; }.ct-search-form .ct-button { padding-inline:15px; font-size:13px; }.ct-search-input input { font-size:13px; }.ct-search-input .ct-icon { width:16px; }.ct-pills { gap:7px; }.ct-pills a { padding:6px 11px; font-size:12px; }.ct-section-block { padding-block:42px; }.ct-section-heading { align-items:flex-start; flex-direction:column; gap:16px; }.ct-section-heading h2 { font-size:29px; }.ct-drawing-grid,.ct-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.ct-drawing-art { padding:29px 9px 9px; }.ct-drawing-art img { height:170px; }.ct-drawing-card h3 { font-size:13px; padding:12px; }.ct-category-art { padding:18px; }.ct-category-art img { height:160px; }.ct-category-card h3 { font-size:17px; padding:15px; }.ct-count { font-size:10px; padding:3px 7px; }.ct-online-promo { grid-template-columns:1fr; gap:40px; padding-block:45px; }.ct-promo-art { max-width:280px; }.ct-promo-art img { height:240px; }.ct-steps { grid-template-columns:1fr; gap:25px; }.ct-benefits { gap:30px 24px; padding-block:40px; }.ct-benefits h3 { font-size:17px; }.ct-about { grid-template-columns:1fr; }.ct-about h2 { font-size:34px; margin-bottom:20px; }.ct-footer-top { flex-direction:column; gap:10px; }.ct-footer-inner { align-items:flex-start; flex-direction:column; gap:10px; }.ct-footer-links { gap:10px 16px; }.ct-page-heading { padding-top:35px; }.ct-page-heading h1 { font-size:34px; }.ct-page-subtitle { font-size:17px; }.ct-detail-layout { grid-template-columns:1fr; }.ct-print-sheet { padding:18px; }.ct-preview-panel { padding:20px; }.ct-download-panel { padding:25px; }.ct-editor-placeholder { padding:28px; }.ct-dialog { padding:40px 20px 20px; }.ct-dialog h2 { font-size:25px; }.ct-heading-count { display:block; margin:10px 0 0; }.ct-theme-select { flex-wrap:wrap; }.ct-filter-bar { gap:15px; }.ct-theme-select select { max-width:100%; } }
@media (max-width:380px) { .ct-brand { font-size:20px; }.ct-header-inner { gap:6px; }.ct-hero h1 { font-size:36px; }.ct-search-form { flex-wrap:wrap; }.ct-search-input { flex-basis:100%; }.ct-search-form .ct-button { width:100% !important; }.ct-drawing-art img { height:140px; }.ct-category-art img { height:130px; } }
@media print { .ct-back-top,.ct-download-panel,.ct-breadcrumb,.ct-editor-placeholder { display:none; }.ct-detail-layout { display:block; }.ct-preview-panel { padding:0; background:white; }.ct-print-sheet { box-shadow:none; } }
.ct-mobile-account { display:none; }
@media (max-width:900px) { .ct-mobile-account { display:block; margin-top:10px; padding-top:15px; border-top:1px solid var(--ct-border); } }
/* Managed catalog controls and grouped search. */
.ct-filter-bar { flex-wrap:wrap; }
.ct-difficulty-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ct-difficulty-filters > span { margin-right:4px; font-size:12px; }
.ct-filter-link { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:8px 14px; border:1px solid var(--ct-border); border-radius:99px; background:var(--ct-surface); color:var(--ct-ink); text-decoration:none; font-size:12px; }
.ct-filter-link > span:last-child { opacity:.7; }
.ct-filter-link.is-active { background:var(--ct-primary); border-color:var(--ct-primary); color:#fff; }
.ct-filter-dots { font-size:7px; letter-spacing:-1px; color:var(--ct-secondary); }
.ct-filter-link.is-active .ct-filter-dots { color:inherit; }
.ct-result-count { font-size:13px; color:var(--ct-muted); margin:0 0 24px; }
[data-catalog-results][aria-busy=true] .ct-drawing-grid { opacity:.5; }
.ct-search-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:38px; }
.ct-search-theme { display:flex; align-items:center; gap:15px; padding:14px; border:1px solid var(--ct-border); border-radius:18px; text-decoration:none; color:var(--ct-ink); background:var(--ct-surface); }
.ct-search-theme:hover { border-color:var(--ct-primary); }
.ct-search-theme-art { display:block; width:62px; height:66px; flex-shrink:0; background:#fff; border-radius:10px; padding:6px; }
.ct-search-theme-art img { width:100%; height:100%; object-fit:contain; }
.ct-search-theme strong { display:block; font-size:15px; line-height:1.4; }
.ct-search-theme small { display:block; color:var(--ct-muted); font-size:12px; margin-top:3px; }
.ct-search-theme > .ct-icon { margin-left:auto; width:18px; }
.ct-search-more-wrap { display:flex; justify-content:center; margin-top:32px; }
.ct-search-more-wrap .ct-button { gap:10px; }
html[data-theme=dark] .ct-filter-link.is-active { color:#211e2b; }
@media(max-width:900px) { .ct-search-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .ct-search-theme-grid { grid-template-columns:1fr; }.ct-filter-link { padding:8px 11px; }.ct-filter-bar { padding:14px; } }
/* The same A4 geometry is used by this SVG, the standalone print sheet and the PDF. */
.ct-print-sheet { padding:0; border:0; overflow:hidden; }
.ct-sheet-svg { display:block; width:100%; height:100%; flex:1; min-height:0; }
.ct-frame-picker { gap:9px; flex-wrap:wrap; }
.ct-image-download { display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 0; color:var(--ct-muted); text-decoration:none; font-size:13px; }
.ct-image-download .ct-icon { width:18px; }
.ct-image-download:hover { color:var(--ct-primary); text-decoration:underline; }
@media (max-width:760px) { .ct-detail-layout { grid-template-columns:1fr; } }

/* Local coloring workshop. */
.ct-paint {margin:42px 0;padding:clamp(18px,3vw,36px);scroll-margin-top:20px}
.ct-paint-tools,.ct-paint-actions,.ct-paint-palette {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}
.ct-paint button {font:inherit;cursor:pointer;border:1px solid var(--ct-border,#dcd5e8);border-radius:10px;padding:9px 13px;background:var(--ct-surface,#fff);color:var(--ct-ink,#292532)}
.ct-paint button[aria-pressed=true] {outline:3px solid var(--ct-primary,#6945b8);outline-offset:2px}
.ct-paint button:disabled {opacity:.4;cursor:default}
.ct-paint .ct-button {background:var(--ct-primary,#6945b8);color:#fff}
.ct-paint-palette button {width:32px;height:32px;border-radius:50%;padding:0;border:1px solid #aaa}
.ct-paint-palette label,.ct-paint-tools label {display:flex;gap:8px;align-items:center;font-size:.9rem}
.ct-paint-palette input {width:40px;height:32px;padding:0;border:0;background:transparent}
.ct-paint-paper {background:#eee9f4;border-radius:14px;padding:12px;text-align:center;overflow:hidden}
.ct-paint canvas {display:block;background:white;max-width:100%;width:auto;height:auto;max-height:80vh;margin:auto;touch-action:none;cursor:crosshair;box-shadow:0 3px 14px #29253218}
.ct-paint canvas[hidden],.ct-paint-controls[hidden] {display:none}
.ct-paint canvas:focus-visible {outline:3px solid var(--ct-primary,#6945b8);outline-offset:3px}
.ct-paint-expanded {position:fixed;inset:8px;z-index:10000;margin:0;overflow:auto;background:var(--ct-surface,#fff)}
.ct-paint-expanded canvas {max-height:65vh}
@media(max-width:650px){.ct-paint-actions button{font-size:.85rem;padding:8px}.ct-paint-palette{gap:9px}.ct-paint-paper{padding:6px}.ct-paint canvas{width:100%;max-height:none}.ct-paint-expanded{inset:0;border-radius:0}.ct-paint-expanded canvas{width:auto;max-height:65vh}}

/* Personal creative space and moderated gallery. */
.ct-drawing-favorite{margin:0 0 20px}.ct-drawing-favorite p:empty,.ct-member-status:empty{display:none}
.ct-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.ct-account-grid .ct-panel{padding:24px}
.ct-member-space input[type=text],.ct-member-space input[type=password],.ct-paint-cloud input{display:block;width:100%;max-width:420px;border:1px solid #c6bfd3;border-radius:8px;padding:10px;font:inherit;background:var(--ct-surface,#fff);color:var(--ct-ink,#292532)}
.ct-member-space label{display:block;margin-bottom:6px}.ct-member-space input[type=submit]{padding:12px 22px;background:var(--ct-primary,#6945b8);color:white;border:0;border-radius:10px;font:inherit;cursor:pointer}
.ct-member-space .login-remember label{display:flex;align-items:center;gap:8px}.ct-member-space h2{margin-top:30px}
.ct-creation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}
.ct-creation-card{border:1px solid var(--ct-border,#e2dcea);border-radius:16px;padding:16px;background:var(--ct-surface,#fff);overflow-wrap:anywhere}
.ct-creation-card img{display:block;width:100%;height:260px;object-fit:contain;background:white;border-radius:8px}.ct-creation-card h3{margin:16px 0 8px;font-size:1.1rem}
.ct-creation-actions{display:flex;flex-direction:column;gap:10px}.ct-creation-actions button{font:inherit;white-space:normal;text-align:center}.ct-creation-actions a{font-size:.9rem}
.ct-favorites-list>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #e2dcea}
.ct-paint-cloud{margin-top:18px;border-top:1px solid #ddd4e9;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.ct-paint-cloud label{font-size:.9rem}.ct-paint-cloud input{max-width:220px}
.ct-member-status{background:#f4edf9;color:#412568;padding:12px;border-radius:8px}.ct-prose:has(.ct-member-space),.ct-prose:has(.ct-creation-grid){max-width:none}
@media(max-width:900px){.ct-creation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.ct-account-grid,.ct-creation-grid{grid-template-columns:1fr}.ct-favorites-list>div{align-items:flex-start;flex-direction:column}.ct-creation-card img{height:320px}}

html[data-theme=dark] .page-numbers.current {color:#211e2b}
@media print {.ct-paint,.ct-drawing-favorite {display:none !important}}