/* ===== LAYOUT ===== */
/* F305 (24 mai 2026) : scrollbar-gutter stable reserve l espace de la scrollbar
   verticale meme quand la page tient sans scroll, ce qui empeche le main de
   shifter de ~15px a droite/gauche quand la scrollbar apparait/disparait
   (typiquement en changeant de section ou quand realtime ajoute des rows). */
html{scrollbar-gutter:stable}
.layout{display:flex;min-height:100vh}
.side{width:248px;background:var(--sidebar-bg);border-right:1px solid var(--b);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:10;overflow-y:auto}
/* F305 : largeur fixe sur les boutons son de la sidebar (mail/send/bell + variants off)
   pour eviter le micro-shift quand on toggle — les icones tabler n ont pas exactement
   la meme advance width entre la version on et la version off. */
.shead .iconbtn{min-width:28px;width:28px;padding:4px 0;justify-content:center}
/* F111.2 : hauteur shead alignee sur topbar (toutes les deux a 95px) */
.shead{padding:14px 22px;border-bottom:1px solid var(--b);height:95px;display:flex;flex-direction:column;justify-content:center}
.logo{display:flex;align-items:center;justify-content:center;gap:10px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--t);flex-shrink:0}
.brand{font-size:15px;font-weight:800;letter-spacing:.08em}
/* F111.1 : ubadge centre + font 18px (+6px par rapport a lancien 12px) */
.ubadge{margin-top:10px;font-size:18px;color:var(--mu);font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px}
.snav{flex:1;padding:10px 0}
.ng{padding:18px 22px 6px;font-size:21px;font-weight:700;color:var(--tx)}
.ni{display:flex;align-items:center;gap:11px;padding:9px 22px;font-size:19px;font-weight:500;color:var(--t);cursor:pointer;border:none;background:none;width:100%;text-align:left;border-left:3px solid transparent;transition:background .12s}
.ni:hover{background:var(--hover)}
.ni i{font-size:18px;width:20px;text-align:center;color:var(--t);flex-shrink:0;stroke-width:1.6}
.ni.on{color:var(--tx);background:var(--b2);border-left-color:var(--tx);font-weight:700}
.ni.on i{color:var(--tx)}
.ni.danger{color:var(--red)}
.ni.danger i{color:var(--red)}
.ni.danger.on{color:var(--red);background:var(--red-bg);border-left-color:var(--red)}
.ni.danger.on i{color:var(--red)}
/* F144 (16 mai 2026) : pastille sidebar teal par defaut (Podialine), .ni-badge-danger pour rouge (SAV uniquement). */
.ni-badge{margin-left:auto;font-size:11px;font-weight:700;background:var(--t);color:#fff;padding:1px 7px;border-radius:10px;min-width:18px;text-align:center}
.ni-badge.ni-badge-danger{background:var(--red)}
.sfoot{padding:14px 18px;border-top:1px solid var(--b)}
.main{margin-left:248px;flex:1;padding:0;min-height:100vh;padding-bottom:90px}
.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--b);padding:14px 36px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:9;height:95px;overflow:visible}
.topstat{flex:1;display:flex;gap:0;align-items:center;height:100%;min-width:0}
.tstat{padding:6px 16px;border-right:1px solid var(--b2);min-width:0;flex:1;cursor:pointer;transition:background .12s;white-space:nowrap}
.tstat:hover{background:var(--hover)}
.tstat:last-of-type{border-right:none}
.tslab{font-size:11px;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.tsnum{font-size:18px;font-weight:800;color:var(--t)}
.tsnum .ca{font-size:13px;font-weight:600;color:var(--tx);margin-left:6px}
.tsnum.rec{color:var(--am);font-size:15px}
.live-pill{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:700}
.live-pill.live{background:var(--gr-bg);color:var(--gr-tx)}
.live-pill.demo{background:var(--am-bg);color:var(--am-tx)}
/* ===== CONTENT ===== */
/* F174 (16 mai 2026) : largeur max page = 3 cartes du dashboard (280*3 + gaps + padding ~= 950px).
   Centree avec margin:auto pour rester lisible sur grand ecran. Le tableau Meta est dans
   un wrapper overflow-x:auto qui peut scroller au-dela de cette largeur (cf creas.js).
   Historique : F152 etait a 1400px (trop large) -> 950 pour caler sur la largeur 3 cartes. */
.page{padding:30px 40px 50px;max-width:950px;margin:0 auto}
.ptitle{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.psub{font-size:14px;color:var(--mu);margin-bottom:28px}
.section-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px;flex-wrap:wrap}
.section-h h2{font-size:17px;font-weight:700;letter-spacing:-.005em}
/* ===== METRIC GRID (container) ===== */
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:22px}
/* ===== SYNCBAR ===== */
.syncbar{position:fixed;bottom:0;left:248px;right:0;background:var(--bg-soft);border-top:1px solid var(--b);padding:7px 36px;font-size:12px;color:var(--mu);display:flex;align-items:center;gap:8px;backdrop-filter:blur(6px);z-index:8;opacity:.96}
/* ===== RESPONSIVE LAYOUT ===== */
/* F152 (16 mai 2026) : cibles officiellement supportees = desktop standard (>=1280px) + iPad paysage (1024-1279px).
   En-dessous de 1024px : fallback historique conserve pour ne rien casser, hors scope produit pour l instant. */

/* --- IPAD PAYSAGE (1024-1279px) : iPad Air, Pro 11", Pro 12.9" portrait/paysage ---
   Sidebar 210px AVEC labels (au lieu d icones seules), padding compact, topbar serree. */
@media(min-width:1024px) and (max-width:1279px){
  .side{width:210px}
  .shead{padding:10px 16px;height:78px}
  .brand{font-size:14px}
  .ubadge{font-size:14px;margin-top:6px}
  .ng{padding:14px 16px 4px;font-size:17px}
  .ni{padding:8px 16px;font-size:15px;gap:9px}
  .ni i{font-size:16px}
  .ni-badge{font-size:10px;padding:1px 6px}
  .main{margin-left:210px;padding-bottom:80px}
  .syncbar{left:210px;padding:6px 24px}
  .topbar{padding:10px 22px;height:78px;gap:8px}
  .tstat{padding:5px 12px}
  .tslab{font-size:10px}
  .tsnum{font-size:16px}
  /* F174.1 : on garde la max-width:950 de base — sinon les cartes s elargissaient sur iPad paysage et donnaient l impression que tout grossit quand on retrecit la fenetre. */
  .page{padding:22px 26px 36px}
  .g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
  /* F152 : ajuste menu avatar (top base = shead 78px - 3px chevauchement, width = sidebar 210 - 12*2 = 186) */
  .av-menu{top:75px;width:186px}
  /* F152 : cards & metrics legerement compactees pour le paysage iPad */
  .met{padding:18px 18px}
  .met .mn{font-size:26px}
  .card{padding:18px}
  .ptitle{font-size:22px}
}

/* --- PETIT ECRAN (901-1023px) : fallback historique, sidebar en icones seules.
   Hors scope produit, conserve pour eviter regression. --- */
@media(min-width:901px) and (max-width:1023px){
  .side{width:64px}
  .side .shead{padding:14px 8px;justify-content:center}
  .side .shead .logo .brand{display:none}
  .side .shead .ubadge span{display:none}
  .side .shead .ubadge i.ti-chevron-down{display:none}
  .side .shead .iconbtn{display:none}
  .side .ng{display:none}
  .side .ni span{display:none}
  .side .ni{justify-content:center;padding:10px 8px;position:relative}
  .side .ni .ni-badge{position:absolute;top:4px;right:4px;margin:0;font-size:9px;padding:1px 5px;min-width:14px}
  .side .sfoot{display:none}
  .main{margin-left:64px;padding-bottom:90px}
  .syncbar{left:64px}
  /* F174.1 : pas d override max-width pour garder la cap a 950 base. */
  .page{padding:24px 28px 40px}
  .topbar{padding:10px 20px;flex-wrap:wrap;height:auto;min-height:60px}
}
/* --- TRES PETIT ECRAN (<=900px) : sidebar empilee, fallback historique inchange. Hors scope produit. --- */
@media(max-width:900px){
  .side{width:100%;height:auto;position:relative;border-right:none;border-bottom:1px solid var(--b)}
  .main{margin-left:0;padding-bottom:120px}
  .syncbar{left:0}
  .layout{flex-direction:column}
  .page{padding:20px}
  .topbar{padding:10px 20px;flex-wrap:wrap;height:auto;min-height:60px}
  .topstat{flex-wrap:wrap}
  .tstat{flex:1 1 45%;border-right:none}
  .chat-win{width:calc(100vw - 24px);right:12px;bottom:80px;height:60vh}
}