/* Accueil (vue 03) et « Mon QR » (vue 00) de l'espace client : mise en page seulement. Les composants (sections,
   lignes, pastilles, verrous, chiffres clés, boutons) viennent de la bibliothèque (brand/components.css) ; les supports
   sont dessinés par le moteur unique (support-render.js). Rendu par static/accueil-ui.js. */
.home-screen{display:flex;flex-direction:column;gap:var(--space-6)}
.home-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.home-col{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
/* Carrousel des produits : une ligne qui défile à l'horizontale, aimantée tuile par tuile. */
.home-carousel{display:flex;gap:var(--space-4);margin:0;padding:var(--space-1) var(--space-1) var(--space-3);list-style:none;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.home-carousel:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.home-prod{flex:none;display:flex;flex-direction:column;gap:var(--space-3);width:calc(var(--space-16) * 4.7);padding:var(--space-4);scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.home-prod__vis{display:grid;place-items:center;height:calc(var(--space-16) * 3);padding:var(--space-4);border-radius:var(--radius-sm);background:var(--bg-2)}
.home-prod__vis .support-face{margin:0}
.home-prod__vis--card .support-face{width:100%}
.home-prod__vis--badge .support-face{width:calc(var(--space-16) + var(--space-10))}
.home-prod__vis--pass .support-face{width:calc(var(--space-16) + var(--space-12))}
.home-prod__vis svg{display:block;width:100%;height:auto}
.home-prod__ttl{display:flex;align-items:center;gap:var(--space-2);min-height:var(--space-6)}
.home-prod__ttl .hl-product-title{font-size:var(--fs-16)}
.home-prod__ttl .hl-pill{margin-left:auto}
.home-prod__sub{margin:calc(-1 * var(--space-2)) 0 0;font-size:var(--fs-14);color:var(--text-2)}
.home-prod__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto}
/* AV-001 : les actions passent à la ligne (jamais de rangée qui déborde sous la tuile suivante), même à 44 px et en texte 200 %. */
.home-prod__acts .hl-btn{flex:1 1 auto;min-width:0;max-width:100%}
.home-prod--add{padding:0;background:transparent;border:2px dashed var(--line-strong)}
.home-prod__add{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);
  border-radius:inherit;color:var(--text-2);text-align:center;text-decoration:none;font-size:var(--fs-14)}
.home-prod__add strong{color:var(--text)}
.home-prod__add:hover{background:var(--surface)}
.home-prod__add:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Chiffres clés : trois tuiles (Pro) ; l'aperçu Essentiel en montre quatre, deux par ligne, étiquetées « Exemple ». */
.home-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.home-kpis--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-exemple{position:relative}
.home-exemple__tag{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2}
.home-note{margin:var(--space-2) 0 0}
.home-when{white-space:nowrap}
.home-av{display:grid;place-items:center;flex:none;width:var(--space-10);height:var(--space-10);border-radius:var(--radius-full);
  background:var(--info-bg);color:var(--accent);font-size:var(--fs-12);font-weight:700}
.home-commande{display:contents}
.home-actions{display:contents}
/* LiooPage résumée */
.home-page{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-4)}
.home-page__av{display:grid;place-items:center;flex:none;width:var(--space-16);height:var(--space-16);border-radius:var(--radius-sm);
  background:var(--blue);color:var(--lime);font-size:var(--fs-16);font-weight:800}
.home-page__tx{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:0;flex:1}
.home-page__tx .hl-product-title{font-size:var(--fs-16)}
.home-page__name{margin:0;font-weight:600}
.home-page__link{margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-14);color:var(--text-2)}
.home-page__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
/* Mon QR : la scène encre du QR de la page, à côté de ce vers quoi il mène. */
.myqr{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:var(--space-8);align-items:start}
.myqr__stage{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-6);border-radius:var(--radius-lg);
  background:var(--ink-panel);border:1px solid var(--ink-panel-line);color:var(--on-dark);text-align:center}
.myqr__tile{width:100%;max-width:calc(var(--space-16) * 4.6)}
.myqr__tile .support-face{margin:0}
.myqr__tile svg{display:block;width:100%;height:auto}
.myqr__who{display:flex;flex-direction:column;gap:var(--space-1)}
.myqr__who strong{font-size:var(--fs-24);font-weight:700}
.myqr__who span{color:var(--on-dark-2);font-size:var(--fs-14)}
.myqr__link{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border-radius:var(--radius-full);background:var(--ink-2);border:1px solid var(--ink-line)}
.myqr__link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-weight:600}
.myqr__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.myqr__acts .hl-btn{background:transparent;color:var(--on-dark);border-color:var(--ink-line-strong)}
.myqr__acts .hl-btn:hover{background:var(--ink-2)}
.myqr__draft{margin:0;color:var(--on-dark-2)}
.myqr__side{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
@media (max-width:1100px){
  .home-grid,.myqr{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .home-actions{display:none}
  .home-carousel{margin:0 calc(-1 * var(--space-4));padding:var(--space-1) var(--space-4) var(--space-3);scroll-padding-inline:var(--space-4)}
  .home-prod{width:calc(var(--space-16) * 4.25)}
  .home-kpis .hl-kpi{padding:var(--space-3)}
  .home-kpis .hl-kpi__value{font-size:var(--fs-24)}
  .home-kpis .hl-kpi__label{font-size:var(--fs-12)}
  .myqr__stage{padding:var(--space-5) var(--space-4)}
}