/* V140.7 — Showroom espacé / référence validée. Only within the Showroom UI. */
.ui138 .ui139-showroom{
 --s7-blue:#0046d6;--s7-ink:#000918;--s7-green:#008c51;--s7-muted:#506883;--s7-line:#dce8f5;
 display:flex;flex-direction:column;background:radial-gradient(ellipse at 95% 1%,#e2efff,transparent 45%),#f8fbff;
 padding:24px 28px 35px;
}
.ui138 .ui139-showroom .page-head{order:0;display:block;margin:0 0 10px;flex:none;align-items:initial;}
.ui138 .ui139-showroom .page-head>div>span{font-size:10px;letter-spacing:.16em;color:var(--s7-blue);font-weight:850;}
.ui138 .ui139-showroom .page-head h2{max-width:1040px;font-size:clamp(30px,3vw,44px);letter-spacing:-.055em;line-height:1.05;margin:7px 0 6px;color:var(--s7-ink);}
.ui138 .ui139-showroom .page-head h2 em{color:var(--s7-green);font-style:normal;}
.ui138 .ui139-showroom .page-head p{max-width:1100px;text-align:left;margin:0;font-size:13px;line-height:1.45;color:var(--s7-muted);}
/* Put the actual functional tabs before the showcase visually, without moving JS targets. */
.ui138 .ui139-showroom .showroom-menu{order:1;margin:7px 0 14px;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr));flex:none;}
.ui138 .ui139-showroom .showroom-menu button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:62px;padding:11px 8px;border:1px solid #d0dfec;background:#fff;border-radius:13px;color:#163146;box-shadow:0 5px 14px #0b335608;}
.ui138 .ui139-showroom .showroom-menu button svg{width:21px;height:21px;flex:none;}
.ui138 .ui139-showroom .showroom-menu button span{font-size:11px;line-height:1.28;font-weight:750;margin:0;}
.ui138 .ui139-showroom .showroom-menu button.selected{background:#081e2d;border-color:#081e2d;color:#9ff0d0;box-shadow:0 7px 15px #081e2d16;}
.ui138 .ui139-showroom .showroom-menu button:focus-visible{outline:3px solid #0046d6;outline-offset:3px;}
.ui138 .ui139-showroom .showcase-websites{order:2;display:block;margin:0;min-width:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;}
.ui138 .ui139-showroom .showroom-disclaimer{order:3;margin:10px 2px 0;padding:0;border:0;background:none;color:#617b91;font-size:10px;line-height:1.4;max-width:1100px;}
.ui138 .ui139-showroom #showroom-status{order:4;}
.v1407-showcase,.v1407-showcase *{box-sizing:border-box;}
.v1407-showcase{display:grid;grid-template-columns:minmax(0,1.76fr) minmax(320px,1fr);gap:18px;align-items:stretch;min-width:0;color:var(--s7-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;}
.v1407-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;min-width:0;}
.v1407-card{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--s7-line);border-radius:17px;background:#fff;box-shadow:0 11px 25px #0b33550d;}
.v1407-photo{height:clamp(100px,13.5vh,150px);position:relative;overflow:hidden;isolation:isolate;flex:none;background:#dceafb;}
.v1407-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%;filter:saturate(1.08) contrast(1.025);}
.v1407-card:nth-child(1) .v1407-photo img{object-position:50% 39%;}
.v1407-card:nth-child(2) .v1407-photo img{object-position:50% 30%;}
.v1407-card:nth-child(3) .v1407-photo img{object-position:55% 37%;}
.v1407-card:nth-child(4) .v1407-photo img{object-position:48% 39%;}
.v1407-symbol{position:absolute;z-index:1;left:12px;top:11px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#ffffffec;color:var(--s7-blue);box-shadow:0 5px 17px #123d521d;font-size:23px;font-weight:750;}
.v1407-text{min-width:0;padding:11px 15px 12px;display:flex;flex:1;flex-direction:column;gap:5px;}
.v1407-text h3{margin:0!important;color:var(--s7-ink)!important;font-size:clamp(13px,1.04vw,16px)!important;line-height:1.17;letter-spacing:-.035em;font-weight:800;}
.v1407-text p{margin:0;flex:1;color:#526a83;font-size:clamp(10px,.76vw,12px);line-height:1.34;}
.v1407-tag{display:flex;align-items:center;gap:9px;min-width:0;color:#175b92;background:#eef6ff;border-radius:9px;padding:7px 9px;font-size:10px;font-weight:730;line-height:1.25;}
.v1407-tag>span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:#049767;color:#fff;font-size:14px;}
.v1407-studio{display:flex;flex-direction:column;min-height:0;min-width:0;border-radius:21px;background:linear-gradient(138deg,#edf7ff 0%,#f7fcff 52%,#e5f9ed 100%);border:1px solid #cbdff3;overflow:hidden;box-shadow:0 15px 29px #0b33550e;}
.v1407-studio-header{padding:19px 21px 9px;}
.v1407-studio-pill{display:inline-block;border-radius:999px;color:#076c48;background:#d4f5e3;padding:7px 11px;font-size:10px;font-weight:850;letter-spacing:.085em;}
.v1407-studio h3{font-size:clamp(25px,2.45vw,37px)!important;line-height:1.04;letter-spacing:-.052em;color:var(--s7-ink)!important;margin:13px 0 6px!important;font-weight:850;}
.v1407-studio h3 em{font-style:normal;color:var(--s7-green);}
.v1407-studio-header>p{margin:0 0 12px;font-size:12px;line-height:1.42;color:var(--s7-muted);}
.v1407-studio ul{display:flex;flex-wrap:wrap;gap:6px 12px;list-style:none;margin:0;padding:0;}
.v1407-studio li{color:#046b49;font-size:10px;font-weight:750;white-space:nowrap;}
.v1407-studio li:before{content:'✓';padding-right:5px;color:#008a54;}
.v1407-studio-preview{margin:0 19px;position:relative;overflow:hidden;background:#fff;border:4px solid #102a3f;border-radius:15px 15px 0 0;box-shadow:0 12px 25px #14334e1c;flex:1;min-height:130px;max-height:clamp(170px,25vh,260px);}
.v1407-browser{display:flex;align-items:center;gap:10px;height:26px;background:#102a3f;color:#c9deeb;padding:0 9px;white-space:nowrap;overflow:hidden;}
.v1407-browser span{font-size:10px;letter-spacing:1px;color:#7799a8;}
.v1407-browser strong{font-size:10px;font-weight:650;overflow:hidden;text-overflow:ellipsis;}
.v1407-studio-preview img{width:100%;height:auto;display:block;object-fit:cover;object-position:top left;}
.v1407-studio-callout{display:flex;align-items:center;gap:12px;margin:0 19px;padding:13px 14px;background:#daf6ed;border:1px solid #c3ead9;border-radius:0 0 12px 12px;}
.v1407-studio-callout>span{width:35px;height:35px;flex:none;background:#00a36d;color:#fff;font-size:23px;border-radius:50%;display:grid;place-items:center;}
.v1407-studio-callout strong{color:#0a3043;font-size:14px;font-weight:800;}
.v1407-studio-callout p{font-size:10px;line-height:1.3;color:#3b6b60;margin:3px 0 0;}
.v1407-legal{padding:0 20px 13px;margin:9px 0 0;font-size:9px;color:#607e8c;line-height:1.3;}
/* Keep the six existing detail panels intact and legible when a different tab is selected. */
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites){min-width:0;background:#fff;border:1px solid #dae8f3;border-radius:16px;padding:20px;}
@media(max-width:1220px){.v1407-showcase{grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr);gap:12px}.v1407-examples{gap:10px}.v1407-photo{height:clamp(95px,12.5vh,126px)}.v1407-text{padding:9px 11px}.v1407-studio-header{padding:15px 15px 7px}.v1407-studio-preview,.v1407-studio-callout{margin-left:13px;margin-right:13px}.v1407-studio h3{font-size:28px!important}}
@media(max-width:1040px){.v1407-showcase{grid-template-columns:1fr}.v1407-examples{grid-template-columns:repeat(2,minmax(0,1fr))}.v1407-photo{height:155px}.v1407-studio-preview{max-height:250px}.ui138 .ui139-showroom .showroom-menu{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.ui138 .ui139-showroom{padding:20px 16px 34px}.ui138 .ui139-showroom .showroom-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ui138 .ui139-showroom .showroom-menu button{min-height:54px}.ui138 .ui139-showroom .page-head h2{font-size:32px}.v1407-examples{gap:9px}.v1407-photo{height:125px}.v1407-text h3{font-size:14px!important}.v1407-text p{font-size:11px}.v1407-studio-preview{max-height:250px}}
@media(max-width:520px){.v1407-examples{grid-template-columns:1fr}.v1407-card{display:grid;grid-template-columns:39% minmax(0,1fr);min-height:156px}.v1407-photo{height:100%;min-height:156px}.v1407-text{padding:11px}.v1407-tag{font-size:9px}.v1407-studio h3{font-size:27px!important}.v1407-studio ul{gap:5px 9px}.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites){padding:12px}}
@media(prefers-reduced-motion:reduce){.v1407-showcase *{animation:none!important;transition:none!important}}
/* Prevent any legacy preview-panel height from clipping the new layout. */
.ui138 .ui139-showroom .showcase-websites{height:auto!important;max-height:none;overflow:visible;}