/* LiooStudio (refonte lot 2) : mise en page du hub de tuiles (D44), du configurateur des supports et de LiooBrand.
   Les composants viennent de la bibliothèque (brand/components.css) ; ici seulement la disposition, en jetons.
   Maquettes : propositions-vues/vues/10-liostudio-integration.html, 02-configurateur.html, 01-ma-marque.html. */

.lsx-hub,.lsx-config,.lsx-brand{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.lsx-hint{margin:0;font-size:var(--fs-14);color:var(--text-2)}
.lsx-pad{padding:var(--space-4)}

/* ——— Hub ——— */
.lsx-hub__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.lsx-hub .hl-studiotile__visual .support-face.is-card{width:46%}
.lsx-hub .hl-studiotile__visual .support-face.is-badge{width:22%}
.lsx-hub .hl-studiotile__visual .support-face.is-qr{width:44%}
.lsx-hub .hl-studiotile__visual>.sr-pass{width:38%;height:auto}
.lsx-hub .hl-studiotile__visual>.page-card-cover{width:40%;min-height:0}
.lsx-swatches{display:flex;gap:var(--space-2)}
.lsx-swatches i{display:block;width:calc(var(--space-6) + var(--space-1));height:calc(var(--space-6) + var(--space-1));border-radius:var(--radius-full);
  background:var(--lsx-swatch);border:1px solid var(--line-strong)}
.lsx-lock-sample{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-3)}
.lsx-lock-sample .support-face.is-card{width:min(220px,46%)}
.lsx-lock-sample .support-face.is-badge{width:min(80px,20%)}
.lsx-lock-sample>.sr-pass{width:min(110px,24%);height:auto}
@media (max-width:1100px){.lsx-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .lsx-hub__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .lsx-hub .hl-studiotile__visual .support-face.is-card{width:100%}
  /* AV-087 : les deux faces portrait du LiooBadge côte à côte dans la vignette étroite, entières (plus rognées). */
  .lsx-hub .hl-studiotile__visual:has(.support-face.is-badge){flex-direction:row;align-items:center}
  .lsx-hub .hl-studiotile__visual .support-face.is-badge{width:44%;flex:none}
  .lsx-hub .lsx-swatches{flex-wrap:wrap;justify-content:center}
  .lsx-hub .hl-studiotile__visual .support-face.is-qr{width:80%}
  .lsx-hub .hl-studiotile__visual>.sr-pass{width:62%}
  .lsx-hub .hl-studiotile__visual>.page-card-cover{width:100%}
  .lsx-lock-sample>.sr-pass{display:none}
}

/* ——— Configurateur : aperçu collant à gauche, réglages à droite ; à 390, l'aperçu en tête, une face à la fois ——— */
.lsx-config__top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4)}
.lsx-config__top>.hl-field{min-width:min(100%,18rem)}
.lsx-sec.lsx-source{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.lsx-config__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:var(--space-6);align-items:start}
.lsx-panel{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.lsx-sec{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--line)}
.lsx-sec:first-child{border-top:0}
.lsx-sec .lsx-sec{padding:0;border-top:0}
.lsx-sec__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font-size:var(--fs-14);font-weight:700;color:var(--text)}
.lsx-sec__side{margin:0 0 0 auto;font-weight:600}
.lsx-uv,.lsx-fixed{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);background:var(--bg-2);font-size:var(--fs-14);color:var(--text-2)}
.lsx-uv>.hl-icon{color:var(--accent)}
.lsx-uv strong{display:block;color:var(--text)}
.lsx-facenote strong{color:var(--text)}
/* Onglets produits à 390 : en 2 × 2, les quatre noms entiers (plus de « LiooPas… » coupé sans indice). */
@media (max-width:600px){.lsx-config__top>.hl-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}}
@media (max-width:900px){
  .lsx-config__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .lsx-config__top>.hl-seg{width:100%}
}

/* ——— LiooBrand : étapes à gauche, contenu, aperçu des produits à droite (en tête à 390) ——— */
/* grid-template-rows : l'aperçu (lignes 1 et 2) est plus haut que l'en-tête et le contenu ; la hauteur en trop va à la
   ligne du contenu, jamais sous l'en-tête (audit personnalisation : grand vide au-dessus de « Appliquer »). */
.lsx-brand{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,22rem);grid-template-rows:auto 1fr;gap:var(--space-6);align-items:start}
.lsx-brand__steps,.lsx-brand__preview{position:sticky;top:var(--space-5)}
.lsx-brand__head{grid-column:2;grid-row:1;min-width:0}
.lsx-brand__steps{grid-column:1;grid-row:1 / span 2}
.lsx-brand__main{grid-column:2;grid-row:2}
.lsx-brand__preview{grid-column:3;grid-row:1 / span 2}
.lsx-brand__main{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.lsx-brand__previewtitle{margin:0 0 var(--space-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* Aperçu de LiooBrand : la scène est un SupportStage (kind « board ») ; ici la grille des produits. */
.lsx-board{display:flex;flex-direction:column;gap:var(--space-3);width:100%}
.lsx-board__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.lsx-board__others{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);align-items:end}
.lsx-board__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);margin:0;min-width:0}
.lsx-board__item>*:first-child{width:100%}
.lsx-board__others .support-face.is-badge{width:56%}
.lsx-board__others>.lsx-board__item>.sr-pass{width:70%;height:auto}
.lsx-board__item figcaption{margin:0}
.lsx-stepnav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding-top:var(--space-2)}
.lsx-stepnav__space{flex:1}
.lsx-palette{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}
.lsx-palette__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.lsx-assoc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4) 0}
.lsx-assoc+.lsx-hint{padding:var(--space-2) var(--space-4) var(--space-4)}
.lsx-assoc__demo{display:inline-flex;align-items:center;min-height:var(--control);padding:0 var(--space-4);border-radius:var(--radius-sm);
  background:var(--lsx-demo-bg);color:var(--lsx-demo-ink);font-weight:700}
@media (max-width:1100px){
  .lsx-brand{grid-template-columns:minmax(0,1fr) minmax(0,20rem);grid-template-rows:auto auto 1fr}
  .lsx-brand__head{grid-column:1 / -1;grid-row:1}
  .lsx-brand__steps{grid-column:1 / -1;grid-row:2;position:static}
  .lsx-brand__main{grid-column:1;grid-row:3}
  .lsx-brand__preview{grid-column:2;grid-row:3}
}
@media (max-width:900px){
  .lsx-brand{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--space-4)}
  .lsx-brand__steps,.lsx-brand__preview{position:static}
  .lsx-brand>*{grid-column:1;grid-row:auto}
  /* Étapes libellées (2 × 2) : le nom de chaque étape reste lisible. */
  .lsx-brand .hl-stepper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .lsx-brand .hl-stepper__step .hl-stepper__label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  /* Aperçu en fin d'écran : une grille entière, sans défilement qui coupe les légendes. */
  .lsx-board__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lsx-board__item figcaption{text-align:center}
  .lsx-palette__fields{grid-template-columns:minmax(0,1fr)}
}