/* TSO — Atelier des couleurs, v1.0.0.
 * Ce fichier peut être placé dans le thème enfant :
 * /assets/css/tso-atelier-couleurs.css
 * L'extension charge alors cette copie à la place de la sienne.
 * Toutes les règles sont limitées au module .tso-ral.
 */
.tso-ral {
  --tso-ink:#111316; --tso-charcoal:#1b1e22; --tso-gold:#c8a96a;
  --tso-gold-text:#80652f; --tso-ivory:#f4f1ea; --tso-muted:#64635e;
  --tso-line:#ded9cf; --tso-swatch:#363d43;
  font-family:Montserrat,"Inter",Arial,sans-serif;
  color:var(--tso-ink); background:var(--tso-ivory);
  padding:clamp(22px,3.4vw,52px); border-radius:24px;
  max-width:1440px; width:100%; margin-inline:auto;
  box-sizing:border-box; line-height:1.55; isolation:isolate;
  container-type:inline-size; container-name:tso-colors;
}
.tso-ral *, .tso-ral *::before, .tso-ral *::after {box-sizing:border-box;}
.tso-ral [hidden] {display:none !important;}
.tso-ral button,.tso-ral input,.tso-ral textarea {font:inherit; letter-spacing:normal;}
.tso-ral button {appearance:none; -webkit-appearance:none; cursor:pointer; text-transform:none; margin:0; line-height:1.3; box-shadow:none;}
.tso-ral button:disabled {cursor:not-allowed; opacity:.43;}
.tso-ral button:focus-visible,.tso-ral input:focus-visible,.tso-ral summary:focus-visible,.tso-ral textarea:focus-visible {outline:3px solid var(--tso-gold-text); outline-offset:4px;}
.tso-ral .tso-ral__stage button:focus-visible {outline-color:var(--tso-gold);}
.tso-ral h2,.tso-ral h3,.tso-ral p {margin:0; padding:0;}
.tso-ral h2,.tso-ral h3 {font-family:Oswald,"Arial Narrow","Liberation Sans Narrow",sans-serif; font-weight:600; letter-spacing:-.025em; text-transform:none;}
.tso-ral__header {display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px;}
.tso-ral .tso-ral__eyebrow {font-size:10px; line-height:1.5; font-weight:700; letter-spacing:.21em; color:var(--tso-gold-text); margin-bottom:10px;}
.tso-ral__eyebrow span {margin-inline:9px; opacity:.6;}
.tso-ral .tso-ral__header h2 {font-size:clamp(30px,3.2vw,48px); line-height:1.12; color:var(--tso-ink);}
.tso-ral .tso-ral__intro {font-size:13px; color:var(--tso-muted); margin-top:12px; max-width:620px;}
.tso-ral__source-mark {display:flex; align-items:center; gap:14px; flex-shrink:0; border-left:1px solid #c8a96a88; padding-left:22px;}
.tso-ral__source-mark strong {font-family:Oswald,"Arial Narrow",sans-serif; font-size:42px; font-weight:500; color:var(--tso-gold-text); line-height:1;}
.tso-ral__source-mark span {font-size:11px; line-height:1.5; color:var(--tso-muted);}
.tso-ral__workshop {display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:24px; align-items:stretch;}
.tso-ral__stage {min-width:0; border-radius:18px; padding:24px; color:var(--tso-ivory); background:var(--tso-charcoal); display:flex; flex-direction:column; box-shadow:0 18px 40px -28px #11131699; border:1px solid #323336; overflow:hidden;}
.tso-ral__stage-top {display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1;}
.tso-ral__step {font-size:10px; font-weight:600; color:#d5b87e; letter-spacing:.16em; white-space:nowrap;}
.tso-ral__step span {margin-inline:8px; opacity:.6;}
.tso-ral__step--dark {color:var(--tso-gold-text);}
.tso-ral__views {display:flex; padding:3px; background:#ffffff09; border:1px solid #ffffff16; border-radius:6px; gap:2px;}
.tso-ral .tso-ral__view {border:0; padding:7px 10px; background:transparent; color:#c7c6c0; font-size:10px; border-radius:4px;}
.tso-ral .tso-ral__view.is-active {background:var(--tso-ivory); color:var(--tso-ink);}
.tso-ral__single {display:flex; flex-direction:column; flex:1; min-height:0;}
.tso-ral__scene {flex:1; min-height:325px; position:relative; perspective:1000px; overflow:hidden; background:radial-gradient(ellipse at 72% 25%,#c8a96a12,transparent 60%);}
.tso-ral__scene::before {content:""; position:absolute; inset:22% 4% 0; background-image:linear-gradient(#c8a96a0b 1px,transparent 1px),linear-gradient(90deg,#c8a96a0b 1px,transparent 1px); background-size:38px 38px; transform:perspective(400px) rotateX(65deg) scale(1.4); transform-origin:center bottom; pointer-events:none;}
.tso-ral__vertical-line {position:absolute; top:26px; bottom:57px; left:50%; border-left:1px solid #c8a96a18;}
.tso-ral__vertical-line::before,.tso-ral__vertical-line::after {content:""; position:absolute; width:10px; height:1px; left:-5px; background:#c8a96a5c;}
.tso-ral__vertical-line::before {top:0;}.tso-ral__vertical-line::after {bottom:0;}
.tso-ral__plate {position:absolute; width:55%; height:72%; max-height:320px; left:22%; top:12%; border-radius:5px; background-color:var(--tso-swatch); background-image:linear-gradient(130deg,#ffffff14,transparent 55%,#0000000b); transform:rotateY(-15deg) rotateX(5deg) rotateZ(-6deg); border:1px solid #ffffff35; box-shadow:-7px 0 0 -1px #111316, -8px 0 0 #ffffff30, 22px 28px 42px -15px #000c, inset 1px 1px 0 #ffffff25; transition:background-color .25s ease;}
.tso-ral__plate::before {content:""; position:absolute; top:0; bottom:0; left:3px; width:1px; background:linear-gradient(transparent,#ffffff26,transparent); pointer-events:none;}
.tso-ral__plinth {position:absolute; bottom:8%; left:10%; width:80%; height:14px; background:linear-gradient(90deg,#222529,#444343 55%,#25282b); transform:skewX(-17deg); border-top:1px solid #c8a96a5c; box-shadow:0 16px 25px #0005;}
.tso-ral__scene-note {position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:9px; letter-spacing:.2em; color:#a3a19a;}
.tso-ral__active-info {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding-top:19px; border-top:1px solid #ffffff17;}
.tso-ral__small-label {color:#bcb9b1; font-size:10px;}
.tso-ral .tso-ral__active-info h3 {font-size:40px; line-height:1.2; color:var(--tso-ivory); margin-top:2px; letter-spacing:0;}
.tso-ral__position {display:block; font-size:10px; color:#bcb9b1; margin-top:4px;}
.tso-ral__flat-sample {display:flex; flex-direction:column; gap:5px; align-items:center; flex-shrink:0;}
.tso-ral__flat-sample span {display:block; width:65px; height:46px; border-radius:4px; border:1px solid #ffffff35;}
.tso-ral__flat-sample small {font-size:9px; color:#bcb9b1;}
.tso-ral .tso-ral__duplicate {font-size:10px; margin-top:10px; color:#e3c996; background:#c8a96a12; padding:9px 10px; border-radius:4px;}
.tso-ral__stage-action {margin-top:20px;}
.tso-ral__stage-action .tso-ral__button {width:100%;}
.tso-ral__stage-action small {display:block; text-align:center; font-size:10px; color:#bcb9b1; margin-top:9px; min-height:16px;}
.tso-ral .tso-ral__button {display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:12px 18px; border:1px solid transparent; border-radius:4px; font-size:12px; font-weight:600; text-decoration:none; transition:background .18s,border-color .18s;}
.tso-ral .tso-ral__button--gold {background:var(--tso-gold); color:var(--tso-ink);}
.tso-ral .tso-ral__button--gold:hover:not(:disabled) {background:#dbc08c;}
.tso-ral .tso-ral__button--outline {background:transparent; border-color:#bdb6a8; color:var(--tso-ink);}
.tso-ral .tso-ral__button--outline:hover:not(:disabled) {background:#eae4d8; border-color:var(--tso-gold-text);}
.tso-ral .tso-ral__button--dark {background:var(--tso-ink); color:var(--tso-ivory);}
.tso-ral .tso-ral__button--dark:hover:not(:disabled) {background:#343638;}
.tso-ral__explorer {min-width:0; background:#ffffffb3; border:1px solid #ded9cf; border-radius:18px; padding:24px; display:flex; flex-direction:column;}
.tso-ral__explorer-heading {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:21px;}
.tso-ral__document-tag {font-size:9px; letter-spacing:.12em; color:#747168;}
.tso-ral .tso-ral__search-label {font-size:12px; font-weight:600; display:block; margin-bottom:8px;}
.tso-ral__search-box {display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #cbc5b9; border-radius:6px; padding:0 12px; min-height:46px;}
.tso-ral__search-box svg {flex-shrink:0; color:#786440;}
.tso-ral .tso-ral__search-box input {width:100%; min-width:0; background:transparent; border:0; box-shadow:none; padding:12px 0; border-radius:0; font-size:12px; color:var(--tso-ink); height:auto; outline-offset:1px;}
.tso-ral .tso-ral__search-box input::-webkit-search-cancel-button {display:none;}
.tso-ral .tso-ral__search-box input::placeholder {color:#807c74; opacity:1;}
.tso-ral .tso-ral__clear-search {width:30px; height:30px; display:grid; place-items:center; font-size:22px; background:transparent; border:0; color:#615a50; padding:0; flex-shrink:0;}
.tso-ral__families {display:flex; flex-wrap:wrap; gap:6px; margin-top:16px;}
.tso-ral .tso-ral__family {padding:7px 10px; min-height:32px; background:transparent; border:1px solid #e2ddd3; border-radius:4px; color:#55524c; font-size:11px; font-weight:500;}
.tso-ral .tso-ral__family.is-active {background:var(--tso-ink); border-color:var(--tso-ink); color:var(--tso-ivory);}
.tso-ral .tso-ral__family:hover:not(.is-active) {border-color:#9f895f; background:#f4f1ea;}
.tso-ral__family span {opacity:.65; margin-left:5px; font-size:10px;}
.tso-ral__results-bar {display:flex; justify-content:space-between; gap:8px; margin:20px 0 9px; font-size:10px; color:#706b61;}
.tso-ral__results-bar [data-results-count] {color:var(--tso-ink); font-weight:600;}
.tso-ral__grid-scroll {height:346px; min-height:200px; overflow:auto; overscroll-behavior:contain; padding:4px; margin:-4px; scrollbar-width:thin; scrollbar-color:#b5a17b #ede8de;}
.tso-ral__grid {display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; align-content:start;}
.tso-ral .tso-ral__swatch {display:flex; flex-direction:column; align-items:stretch; padding:4px; gap:5px; border:1px solid #ded9d1; border-radius:6px; background:#fff; color:var(--tso-ink); min-width:0; position:relative; text-align:center; transition:border-color .15s,box-shadow .15s;}
.tso-ral .tso-ral__swatch:hover {border-color:#9c8351; box-shadow:0 3px 10px #11131612;}
.tso-ral .tso-ral__swatch.is-active {border-color:var(--tso-gold-text); box-shadow:0 0 0 1px var(--tso-gold-text);}
.tso-ral__swatch-paint {height:45px; display:block; border-radius:3px; border:1px solid #1113160f; position:relative;}
.tso-ral__swatch-code {font-size:10px; font-weight:600; padding-bottom:1px; white-space:nowrap; letter-spacing:0;}
.tso-ral__swatch-duplicate {font-size:9px; color:#715e38; margin-top:-4px; line-height:1.1;}
.tso-ral .tso-ral__swatch.is-selected .tso-ral__swatch-paint::after {content:"✓"; position:absolute; top:3px; right:3px; width:17px; height:17px; display:grid; place-items:center; background:#111316; color:white; border:1px solid white; font:700 10px Arial,sans-serif; border-radius:50%;}
.tso-ral .tso-ral__grid-help {font-size:10px; color:#777066; margin-top:13px; line-height:1.5;}
.tso-ral__no-results {padding:52px 20px; text-align:center; font-size:12px; color:#5c584f;}
.tso-ral .tso-ral__no-results p {margin:10px 0 18px;}
.tso-ral__comparison {flex:1; min-height:415px; display:flex; flex-direction:column; justify-content:center;}
.tso-ral .tso-ral__compare-intro {font-family:Oswald,"Arial Narrow",sans-serif; font-size:26px; color:var(--tso-ivory); margin:24px 0 5px;}
.tso-ral .tso-ral__compare-sub,.tso-ral .tso-ral__compare-foot {font-size:10px; color:#bcb9b1;}
.tso-ral .tso-ral__compare-foot {margin-top:25px;}
.tso-ral__compare-plates {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px;}
.tso-ral .tso-ral__compare-card {padding:0; border:0; background:transparent; color:var(--tso-ivory); text-align:left; min-width:0;}
.tso-ral__compare-paint {display:block; width:100%; height:205px; border:1px solid #ffffff40; border-radius:3px;}
.tso-ral__compare-label {display:block; font-size:12px; font-weight:600; margin-top:14px; white-space:nowrap;}
.tso-ral__compare-detail {display:block; font-size:10px; color:#bab4a8; margin-top:3px;}
.tso-ral__compare-placeholder {height:205px; border:1px dashed #ffffff20; border-radius:3px; display:grid; place-items:center; color:#b3aca0; font-size:22px;}
.tso-ral__bench {margin-top:24px; border:1px solid var(--tso-line); border-radius:16px; padding:24px; background:linear-gradient(120deg,#ffffffb5,#ffffff65);}
.tso-ral__bench-head {display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px;}
.tso-ral .tso-ral__bench-head h3 {font-size:24px; line-height:1.2; margin-top:7px; color:var(--tso-ink);}
.tso-ral__selection-count {font-size:11px; color:#5f594f; border:1px solid #d7cebe; padding:5px 11px; border-radius:4px; white-space:nowrap;}
.tso-ral__slots {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.tso-ral__slot {height:67px; min-width:0; display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid #dbd6cd; border-radius:6px; background:#fff;}
.tso-ral__slot--empty {border-style:dashed; background:transparent; color:#8a8172;}
.tso-ral__slot-number {font-family:Oswald,"Arial Narrow",sans-serif; font-size:22px; color:#b49a66;}
.tso-ral__slot--empty .tso-ral__slot-label {font-size:11px;}
.tso-ral__slot-paint {width:48px; height:46px; border:1px solid #11131612; border-radius:3px; flex-shrink:0;}
.tso-ral__slot-label {display:flex; flex-direction:column; gap:2px; min-width:0; font-size:12px; font-weight:600;}
.tso-ral__slot-label small {font-size:10px; font-weight:400; color:#756c5d;}
.tso-ral .tso-ral__remove {margin-left:auto; min-width:30px; min-height:36px; padding:0; border:0; background:transparent; color:#57524a; font-size:22px; border-radius:3px; flex-shrink:0;}
.tso-ral .tso-ral__remove:hover {background:#f4f1ea;}
.tso-ral__bench-actions {margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
.tso-ral__bench-right {display:flex; gap:10px;}
.tso-ral .tso-ral__text-button {display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; background:transparent; color:#65512e; padding:10px 0; font-size:11px; font-weight:600; text-decoration:underline; text-underline-offset:4px;}
.tso-ral .tso-ral__text-button:hover:not(:disabled) {color:#111316;}
.tso-ral .tso-ral__notice {font-size:10px; color:#655e53; margin-top:14px; min-height:16px;}
.tso-ral .tso-ral__notice.is-error {color:#973c29;}
.tso-ral__copy-fallback {margin-top:12px;}.tso-ral__copy-fallback label {display:block; font-size:11px; margin-bottom:5px;}
.tso-ral .tso-ral__copy-fallback textarea {display:block; width:100%; background:#fff; color:#111316; border:1px solid #c8a96a; border-radius:4px; padding:10px; font-size:12px;}
.tso-ral__footer {margin-top:20px; color:#726b60; font-size:11px; line-height:1.7;}
.tso-ral__footer strong {font-weight:600; color:#565149;}
.tso-ral__source-details {margin-top:8px;}.tso-ral__source-details summary {cursor:pointer; width:fit-content; color:#6d5b37; font-size:10px;}
.tso-ral .tso-ral__source-details p {padding-top:8px; max-width:960px;}
.tso-ral__noscript {padding:14px; border:1px solid #c8a96a; margin-top:12px !important; font-size:13px;}
.tso-ral__mobile-choice {display:none;}
.tso-ral__mobile-choice > div {display:flex;align-items:center;gap:10px;}
.tso-ral__mobile-choice [data-mobile-paint] {width:28px;height:28px;border-radius:3px;border:1px solid #11131620;}
.tso-ral__mobile-choice strong {font-size:12px;font-weight:600;}
.tso-ral__mobile-choice .tso-ral__button {padding:10px 14px;}
@container tso-colors (max-width:880px) {
 .tso-ral__workshop {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px;}
 .tso-ral__stage,.tso-ral__explorer {padding:18px;}
 .tso-ral__stage-top {flex-wrap:wrap;}
 .tso-ral__document-tag {display:none;}
 .tso-ral__grid {grid-template-columns:repeat(5,minmax(0,1fr));}
 .tso-ral__bench-actions {flex-wrap:wrap;}
 .tso-ral__bench-right {margin-left:auto;}
 .tso-ral__compare-plates {gap:8px;}
 .tso-ral__compare-label {font-size:10px;}
}
@container tso-colors (max-width:670px) {
 .tso-ral__mobile-choice {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #ded9cf;}
 .tso-ral .tso-ral__search-box input {font-size:16px;}
 .tso-ral__header {align-items:flex-start;}.tso-ral__source-mark {display:none;}
 .tso-ral__workshop {grid-template-columns:1fr;}
 .tso-ral__stage-top {flex-wrap:nowrap;}
 .tso-ral__scene {min-height:245px;flex:none;}
 .tso-ral__plate {max-width:200px; height:185px;left:calc(50% - 95px);width:190px;top:15px;}
 .tso-ral__plinth {max-width:320px;left:50%; transform:translateX(-50%) skewX(-17deg);bottom:10%;}
 .tso-ral__active-info {margin-top:15px; padding-top:15px;}
 .tso-ral .tso-ral__active-info h3 {font-size:34px;}
 .tso-ral__grid {grid-template-columns:repeat(6,minmax(0,1fr));}
 .tso-ral__grid-scroll {height:320px;}
 .tso-ral__comparison {min-height:360px;}
 .tso-ral__slots {grid-template-columns:1fr;gap:8px;}
 .tso-ral__slot {height:60px;}.tso-ral__slot--empty {height:48px;}
 .tso-ral__slot-paint {height:40px;}
 .tso-ral__bench {padding:18px;}
 .tso-ral__bench-actions {display:flex;flex-direction:column;align-items:stretch;}
 .tso-ral__bench-right {display:grid;grid-template-columns:1fr;margin-left:0;}
 .tso-ral__compare-paint,.tso-ral__compare-placeholder {height:200px;}
}
@container tso-colors (max-width:360px) {
 .tso-ral__grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;}
 .tso-ral__stage,.tso-ral__explorer {padding:15px;}
 .tso-ral__scene {min-height:225px;}
 .tso-ral__plate {height:165px;width:160px;left:calc(50% - 80px);top:18px;}
 .tso-ral .tso-ral__family {padding:7px 8px;font-size:10px;}
 .tso-ral .tso-ral__search-box input {font-size:16px;}
 .tso-ral__compare-paint,.tso-ral__compare-placeholder {height:160px;}
 .tso-ral__compare-label {font-size:10px;}
 .tso-ral .tso-ral__bench-head h3 {font-size:20px;}
 .tso-ral__step {font-size:9px;letter-spacing:.11em;}
 .tso-ral .tso-ral__view {font-size:10px;padding:6px 8px;}
}
@media (max-width:600px) {
 .tso-ral {padding:20px 14px;border-radius:16px;}
 .tso-ral__header {margin-bottom:22px;}
 .tso-ral .tso-ral__header h2 {font-size:32px;}
 .tso-ral .tso-ral__intro {font-size:12px;}
}
@media (prefers-reduced-motion:reduce) {
 .tso-ral *, .tso-ral *::before,.tso-ral *::after {transition:none !important;animation:none !important;scroll-behavior:auto !important;}
}