/* SEECOM V140.8 — optimisation UX des SIX catégories du Showroom.
   CSS uniquement. Aucun impact sur le JS, les devis ni la navigation globale. */
.ui138 .ui139-showroom{
 --s8-ink:#061b2c;--s8-blue:#0046d6;--s8-green:#07915d;
 --s8-border:#d6e5f1;--s8-muted:#557188;
}
/* Catégories : une seule bande, scannable en moins d'une seconde. */
.ui138 .ui139-showroom .showroom-menu{
 display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
 margin:10px 0 16px;padding:4px 0;align-items:stretch;
}
.ui138 .ui139-showroom .showroom-menu button{
 position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
 min-width:0;min-height:57px;padding:10px 8px;border:1px solid #d7e4ee;
 background:rgba(255,255,255,.95);border-radius:13px;color:#183449;
 box-shadow:0 6px 17px #173d5910;white-space:normal;
}
.ui138 .ui139-showroom .showroom-menu button svg{
 width:22px;height:22px;flex:none;stroke-width:1.8;color:#0069b2;
}
.ui138 .ui139-showroom .showroom-menu button span{
 font-size:clamp(10px,.76vw,12px);line-height:1.18;font-weight:760;
 letter-spacing:-.015em;margin:0;overflow-wrap:normal;
}
.ui138 .ui139-showroom .showroom-menu button.selected,
.ui138 .ui139-showroom .showroom-menu button[aria-selected="true"]{
 background:#062339;color:#eafff4;border-color:#062339;
 box-shadow:0 8px 24px #06233924;
}
.ui138 .ui139-showroom .showroom-menu button.selected svg,
.ui138 .ui139-showroom .showroom-menu button[aria-selected="true"] svg{color:#76efb8}
.ui138 .ui139-showroom .showroom-menu button:focus-visible{outline:3px solid #0046d6;outline-offset:3px}
/* [hidden] doit primer sur display:grid : garantit UN SEUL panneau affiché. */
.ui138 .ui139-showroom .showcase-websites [data-show-panel][hidden],
.ui138 .ui139-showroom .showcase-websites [data-demo-panel][hidden]{display:none!important}
/* Garder exactement le premier tableau Sites web validé en V140.7. */
.ui138 .ui139-showroom #show-panel-sites{min-width:0}
/* Les CINQ autres onglets s'affichent selon le même canevas éditorial. */
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites){
 display:grid;grid-template-columns:minmax(255px,.76fr) minmax(0,1.64fr);
 gap:20px;min-width:0;min-height:375px;align-items:stretch;
 padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.showroom-caption{
 grid-column:1;grid-row:1;display:flex;flex-direction:column;
 justify-content:center;align-items:flex-start;gap:15px;isolation:isolate;
 padding:30px 26px;margin:0;min-height:355px;min-width:0;
 background:radial-gradient(circle at 110% 2%,#255e82 0%,transparent 38%),
 linear-gradient(147deg,#072437,#0a3044 67%,#073b40);
 border:1px solid #18485b;border-radius:22px;position:relative;overflow:hidden;
 box-shadow:0 13px 31px #05253a19;color:white;
}
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.showroom-caption:after{
 content:'';position:absolute;z-index:-1;width:250px;height:250px;
 border:1px solid #83ffe829;border-radius:50%;right:-132px;bottom:-105px;
 box-shadow:0 0 0 32px #7de9e306,0 0 0 72px #7de9e304;
}
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites) .showroom-caption .story-eyebrow{
 color:#8ce8c5;font-size:11px;font-weight:900;letter-spacing:.15em;
}
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites) .showroom-caption h3{
 color:white!important;font-size:clamp(29px,2.35vw,39px)!important;
 font-weight:830;line-height:1.07;letter-spacing:-.055em;margin:0;
}
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites) .showroom-caption p{
 color:#c2dae6;font-size:14px;line-height:1.6;margin:0;max-width:340px;
}
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites) .showroom-caption .demo-pill{
 margin-top:12px;padding:9px 12px;border-radius:999px;
 background:#19485a;border:1px solid #326b71;color:#b9f8dc;
 font-size:10px;letter-spacing:.08em;
}
/* Un exemple concret visible sans ouverture additionnelle. */
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.demo-explorer{
 grid-column:2;grid-row:1;margin:0;min-width:0;
 display:flex;flex-direction:column;justify-content:center;gap:12px;
 padding:20px;background:#fff;border:1px solid var(--s8-border);
 border-radius:22px;box-shadow:0 13px 31px #05253a0e;
}
.ui138 .ui139-showroom .demo-switch{
 margin:0 0 4px;padding:5px;display:flex;gap:4px;flex-wrap:wrap;
 max-width:100%;width:max-content;border-radius:12px;background:#e9f2fb;
}
.ui138 .ui139-showroom .demo-switch button{
 min-height:42px;padding:9px 16px;font-size:12px;line-height:1.25;
 border:1px solid transparent;border-radius:9px;background:transparent;color:#3a607f;
}
.ui138 .ui139-showroom .demo-switch button.active,
.ui138 .ui139-showroom .demo-switch button[aria-pressed="true"]{
 background:#0046d6;border-color:#0046d6;color:#fff;box-shadow:0 4px 12px #0046d62c;
}
.ui138 .ui139-showroom .demo-switch button:focus-visible{outline:3px solid #068958;outline-offset:3px}
.ui138 .ui139-showroom .demo-explorer [data-demo-panel]{min-width:0}
/* Identités : deux marques fictives clairement présentées. */
.ui138 .ui139-showroom #show-panel-logos .identity-gallery{border-radius:16px;box-shadow:none}
.ui138 .ui139-showroom #show-panel-logos .identity-gallery>div{min-height:280px}
.ui138 .ui139-showroom #show-panel-logos .identity-gallery strong{font-size:24px}
/* Outils : des opérations lisibles, pas un tableau surchargé. */
.ui138 .ui139-showroom #show-panel-tools .demo-board{
 grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
 padding:16px;background:#f1f7fd;border:1px solid #d9e8f5;
 border-radius:15px;min-height:275px;
}
.ui138 .ui139-showroom #show-panel-tools .demo-board article{min-width:0}
.ui138 .ui139-showroom #show-panel-tools .demo-board article>div{
 margin-top:9px;padding:14px 10px;border-color:#d7e7f4;line-height:1.4;
}
.ui138 .ui139-showroom #show-panel-tools .demo-task-list{border-radius:15px}
/* Boutique : 3 mises en scène de produit, conservées. */
.ui138 .ui139-showroom #show-panel-shop .demo-products{gap:12px}
.ui138 .ui139-showroom #show-panel-shop .demo-products article{padding:12px;border-radius:14px;min-width:0}
.ui138 .ui139-showroom #show-panel-shop .product-shape{height:180px}
.ui138 .ui139-showroom #show-panel-shop .demo-products strong{font-size:15px;margin-top:12px}
.ui138 .ui139-showroom #show-panel-shop .demo-product-detail{padding:17px;gap:15px}
/* SEO : un vrai parcours pédagogique, pas de promesse de classement. */
.ui138 .ui139-showroom #show-panel-seo .demo-search,
.ui138 .ui139-showroom #show-panel-seo .demo-local-map{
 border-radius:16px;border:1px solid #dce8f3;box-shadow:0 8px 22px #0c315a0b;
}
.ui138 .ui139-showroom #show-panel-seo .demo-search{padding:24px}
.ui138 .ui139-showroom #show-panel-seo .demo-searchbar{
 background:#f8fbff;border-color:#dce8f3;display:flex;align-items:center;gap:12px;
 margin:0 0 20px;padding:13px 17px;
}
.ui138 .ui139-showroom #show-panel-seo .demo-local-map .scene-map{min-height:250px}
/* Réseaux sociaux : Social Studio réel en premier, aperçus existants plus bas. */
.ui138 .ui139-showroom #show-panel-social{
 grid-template-columns:minmax(255px,.70fr) minmax(0,1.70fr);
 align-items:start;
}
.ui138 .ui139-showroom #show-panel-social>.showroom-caption{grid-column:1;grid-row:1;min-height:430px}
.ui138 .ui139-showroom #show-panel-social>.v139-studio-product{
 grid-column:2;grid-row:1;display:grid;
 grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
 gap:16px;margin:0;padding:22px;
 background:linear-gradient(145deg,#e8f4ff,#f1fdf6);
 border:1px solid #d1e6f2;border-radius:22px;color:#0a2941;
 box-shadow:0 13px 31px #05253a0e;
}
.ui138 .ui139-showroom #show-panel-social .v139-studio-copy h4{font-size:clamp(25px,2.2vw,35px);color:#08253a;margin:13px 0}
.ui138 .ui139-showroom #show-panel-social .v139-studio-copy>p{font-size:13px;line-height:1.5;color:#45677b}
.ui138 .ui139-showroom #show-panel-social .v139-studio-copy li{border-color:#cee3ec;padding:9px 0}
.ui138 .ui139-showroom #show-panel-social .v139-studio-copy li>b{font-size:13px;color:#083e38}
.ui138 .ui139-showroom #show-panel-social .v139-studio-copy li>span{font-size:11px;color:#4a726d}
.ui138 .ui139-showroom #show-panel-social .v139-eyebrow{color:#046ea6}
.ui138 .ui139-showroom #show-panel-social .v139-studio-screen{transform:none;border-color:#b3d2dd;box-shadow:0 8px 24px #003b6430}
.ui138 .ui139-showroom #show-panel-social .v139-studio-screen img{max-height:350px;object-fit:cover;object-position:top}
.ui138 .ui139-showroom #show-panel-social .v139-studio-reserve{grid-column:1/-1;color:#557487;font-size:10px;line-height:1.4}
.ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)#show-panel-social>.demo-explorer{
 grid-column:1/-1;grid-row:2;margin-top:0;display:block;min-height:0;
}
.ui138 .ui139-showroom #show-panel-social>.demo-explorer .demo-social{margin:0;max-width:520px}
/* Lecture sur portable : ne pas transformer six catégories en trois rangées. */
@media(max-width:1250px){
 .ui138 .ui139-showroom .showroom-menu{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;padding:5px 2px 12px;scrollbar-width:thin}
 .ui138 .ui139-showroom .showroom-menu button{min-width:155px;flex:0 0 155px;scroll-snap-align:start}
 .ui138 .ui139-showroom .showroom-menu button span{font-size:11px}
}
@media(max-width:1000px){
 .ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites){grid-template-columns:1fr;gap:13px}
 .ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.showroom-caption{grid-column:1;grid-row:auto;min-height:180px;padding:22px}
 .ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.demo-explorer{grid-column:1;grid-row:auto}
 .ui138 .ui139-showroom #show-panel-social>.v139-studio-product{grid-column:1;grid-row:auto}
 .ui138 .ui139-showroom #show-panel-social>.demo-explorer{grid-column:1;grid-row:auto}
}
@media(max-width:620px){
 .ui138 .ui139-showroom .showroom-menu{margin-top:8px}
 .ui138 .ui139-showroom .showroom-menu button{min-height:52px;min-width:142px;flex-basis:142px}
 .ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.showroom-caption{padding:18px;gap:10px}
 .ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.showroom-caption h3{font-size:28px!important}
 .ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.showroom-caption p{font-size:13px}
 .ui138 .ui139-showroom .showcase-websites [data-show-panel]:not(#show-panel-sites)>.demo-explorer{padding:12px}
 .ui138 .ui139-showroom #show-panel-social>.v139-studio-product{grid-template-columns:1fr;padding:16px}
 .ui138 .ui139-showroom #show-panel-tools .demo-board{grid-template-columns:1fr}
 .ui138 .ui139-showroom #show-panel-shop .demo-products{grid-template-columns:1fr}
 .ui138 .ui139-showroom #show-panel-logos .identity-gallery>div{min-height:190px}
 .ui138 .ui139-showroom #show-panel-logos .identity-gallery strong{font-size:17px}
 .ui138 .ui139-showroom .demo-switch button{font-size:11px;padding:8px 10px}
 .ui138 .ui139-showroom #show-panel-seo .demo-local-map{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.ui138 .ui139-showroom .showroom-menu,.ui138 .ui139-showroom .showcase-websites *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}