/* ============================================================================
   BUILD360 — THÈME OFFICIEL 2026 · BLANC / JAUNE CONSTRUCTION / NOIR-GRIS
   Lot THEME-001 — FONDATION. Aucune migration d'écran dans ce lot.
   ============================================================================

   RÈGLE DE PORTÉE — À LIRE AVANT TOUTE MODIFICATION
   -------------------------------------------------
   Ce fichier est conçu pour avoir un IMPACT VISUEL NUL sur la production
   tant que la classe `.theme-build360-2026` n'est pas posée sur un ancêtre.

     · Bloc 1 (`:root`)  ne déclare QUE des variables `--b360-*` NOUVELLES.
                         Aucune de ces variables n'est consommée par un écran
                         existant : les déclarer est donc sans effet.
     · Bloc 2 (`.theme-build360-2026`) redéclare les variables HISTORIQUES
                         (`--primary`, `--ink`, `--bp-*`, `--sb-w`, …) en les
                         faisant pointer sur les tokens `--b360-*`.
                         Comme les propriétés personnalisées sont héritées, un
                         écran placé sous cette classe est intégralement
                         recoloré SANS qu'une seule règle historique soit
                         modifiée.
     · Bloc 3            quelques règles de base, elles aussi scopées.

   ORDRE DE CHARGEMENT
   -------------------
   Ce fichier est chargé JUSTE AVANT `ux5-floating-layers.css`, qui doit rester
   la dernière feuille de l'application (elle s'appuie sur la cascade pour
   corriger le recouvrement des couches flottantes). Ce placement est sans
   risque : toutes les règles de ce fichier sont portées par une classe
   (spécificité 0-2-0 minimum) et l'emportent donc sur les sélecteurs simples
   d'UX-5 sans dépendre de l'ordre.

   CE QUE CE FICHIER NE FAIT PAS
   -----------------------------
   Il ne touche ni à Supabase, ni aux RLS, ni aux RPC, ni à l'ACL, ni aux
   permissions, ni aux forfaits, ni aux routes, ni à aucune donnée métier.
   ========================================================================== */


/* ============================================================================
   BLOC 1 — TOKENS BUILD360 (nouveaux noms, aucun conflit possible)
   ========================================================================== */
:root{

  /* -- 1.1 Primitives de couleur ------------------------------------------ */
  --b360-yellow-050:#FFFAEB;
  --b360-yellow-100:#FFF3CF;
  --b360-yellow-200:#FFE3A3;
  --b360-yellow-500:#FFB300;   /* couleur d'identité */
  --b360-yellow-600:#E09A00;   /* survol            */
  --b360-yellow-700:#B87D00;   /* texte / accent    */

  --b360-gray-000:#FFFFFF;
  --b360-gray-050:#FAFAFA;
  --b360-gray-100:#F3F4F6;
  --b360-gray-200:#E5E7EB;
  --b360-gray-300:#D1D5DB;
  --b360-gray-400:#9CA3AF;
  --b360-gray-500:#6B7280;
  --b360-gray-700:#374151;
  --b360-gray-900:#111827;

  --b360-green-500:#16A34A;  --b360-green-050:#E7F6EC;  --b360-green-700:#0B6B33;
  --b360-amber-500:#F59E0B;  --b360-amber-050:#FEF3C7;  --b360-amber-700:#92400E;
  --b360-red-500:#EF4444;    --b360-red-050:#FEE2E2;    --b360-red-700:#B42318;
  --b360-blue-500:#3882F6;   --b360-blue-050:#E3EDFD;   --b360-blue-700:#1A56C4;

  /* -- 1.2 Tokens sémantiques --------------------------------------------- */
  /* Ce sont EUX que les composants doivent consommer, jamais les primitives. */
  --b360-primary:var(--b360-yellow-500);
  --b360-primary-hover:var(--b360-yellow-600);
  --b360-primary-soft:var(--b360-yellow-100);
  --b360-primary-subtle:var(--b360-yellow-050);
  --b360-primary-text:var(--b360-yellow-700);   /* jaune lisible sur blanc — AA */
  --b360-on-primary:var(--b360-gray-900);       /* JAMAIS de blanc sur jaune   */

  --b360-bg:var(--b360-gray-100);
  --b360-surface:var(--b360-gray-000);
  --b360-surface-muted:var(--b360-gray-050);
  --b360-surface-raised:var(--b360-gray-000);
  --b360-surface-inverse:var(--b360-gray-900);

  --b360-text:var(--b360-gray-900);
  --b360-text-secondary:var(--b360-gray-500);
  --b360-text-muted:var(--b360-gray-400);
  --b360-text-strong:var(--b360-gray-700);
  --b360-text-inverse:var(--b360-gray-000);

  --b360-border:var(--b360-gray-200);
  --b360-border-strong:var(--b360-gray-300);
  --b360-divider:var(--b360-gray-100);

  --b360-success:var(--b360-green-500); --b360-success-soft:var(--b360-green-050); --b360-success-text:var(--b360-green-700);
  --b360-warning:var(--b360-amber-500); --b360-warning-soft:var(--b360-amber-050); --b360-warning-text:var(--b360-amber-700);
  --b360-danger:var(--b360-red-500);    --b360-danger-soft:var(--b360-red-050);    --b360-danger-text:var(--b360-red-700);
  --b360-info:var(--b360-blue-500);     --b360-info-soft:var(--b360-blue-050);     --b360-info-text:var(--b360-blue-700);
  --b360-neutral-soft:var(--b360-gray-100); --b360-neutral-text:var(--b360-gray-700);

  /* -- 1.3 Typographie ----------------------------------------------------- */
  --b360-font-ui:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --b360-font-data:'Fira Code','SFMono-Regular',Consolas,monospace;

  --b360-size-h1:28px;   --b360-weight-h1:700;   --b360-lh-h1:1.18;
  --b360-size-h2:20px;   --b360-weight-h2:600;   --b360-lh-h2:1.28;
  --b360-size-h3:16px;   --b360-weight-h3:600;   --b360-lh-h3:1.35;
  --b360-size-body:14px; --b360-weight-body:500; --b360-lh-body:1.5;
  --b360-size-secondary:13px; --b360-weight-secondary:400;
  --b360-size-small:12px;     --b360-weight-small:400;
  --b360-size-kpi:30px;  --b360-weight-kpi:600;  --b360-lh-kpi:1.05;
  --b360-size-kpi-sm:24px;
  --b360-tracking-tight:-.02em;
  --b360-tracking-kpi:-.03em;

  /* -- 1.4 Espacements — échelle unique ------------------------------------ */
  --b360-space-1:4px;   --b360-space-2:8px;   --b360-space-3:12px;
  --b360-space-4:16px;  --b360-space-5:20px;  --b360-space-6:24px;
  --b360-space-8:32px;  --b360-space-10:40px; --b360-space-12:48px;
  --b360-space-16:64px;

  /* -- 1.5 Rayons ---------------------------------------------------------- */
  --b360-radius-field:6px;     /* input, select, textarea            */
  --b360-radius-control:8px;   /* bouton, onglet, item de navigation */
  --b360-radius-card:12px;     /* carte, panneau                     */
  --b360-radius-surface:16px;  /* grande surface, drawer             */
  --b360-radius-sheet:20px;    /* modale, bottom sheet               */
  --b360-radius-pill:999px;

  /* -- 1.6 Ombres — TROIS niveaux, pas un de plus -------------------------- */
  --b360-shadow-sm:0 2px 8px rgba(17,24,39,.06);    /* carte au repos        */
  --b360-shadow-md:0 4px 16px rgba(17,24,39,.10);   /* survol, dropdown      */
  --b360-shadow-lg:0 12px 32px rgba(17,24,39,.16);  /* modale, drawer, sheet */
  /* alias d'usage — n'ajoutez PAS de quatrième niveau */
  --b360-shadow-card:var(--b360-shadow-sm);
  --b360-shadow-hover:var(--b360-shadow-md);
  --b360-shadow-float:var(--b360-shadow-lg);

  /* -- 1.7 Dimensions de gabarit ------------------------------------------- */
  --b360-sidebar-w:232px;
  --b360-topbar-h:72px;
  --b360-content-max:1240px;
  --b360-tap-min:44px;          /* cible tactile minimale */
  --b360-tap-comfort:48px;

  /* -- 1.8 Focus et transitions -------------------------------------------- */
  --b360-focus-ring:0 0 0 3px var(--b360-yellow-100);
  --b360-focus-outline:2px solid var(--b360-gray-900);
  --b360-focus-offset:2px;
  --b360-transition-fast:120ms cubic-bezier(.4,0,.2,1);
  --b360-transition:160ms cubic-bezier(.4,0,.2,1);

  /* -- 1.9 Points de rupture officiels (documentaires) ---------------------
     CSS ne permet pas d'utiliser une variable dans @media : ces valeurs sont
     rappelées ici pour que la référence reste unique et lisible.
       mobile    : < 600px    → 2 cartes
       tablette  : 600–1023px → 3 cartes
       desktop   : ≥ 1024px   → 4 cartes
       très grand: ≥ 1440px   → 4 cartes + max-width var(--b360-content-max)
     ---------------------------------------------------------------------- */
  --b360-bp-mobile:600px;
  --b360-bp-tablet:1024px;
  --b360-bp-desktop:1440px;
}


/* ============================================================================
   BLOC 2 — ALIAS DE COMPATIBILITÉ
   ----------------------------------------------------------------------------
   Portée : uniquement sous `.theme-build360-2026`.
   Chaque variable historique est redirigée vers un token Build360. Aucune
   règle CSS existante n'est modifiée : c'est la valeur héritée qui change.

   ATTENTION — `--primary` a cinq déclarations concurrentes dans l'application
   (styles.css:3, design-system-v2.css:13/190/909/1350, theme-blueprint.css:40).
   Toutes sont posées sur `:root`. Une redéclaration sur une CLASSE l'emporte
   pour tout le sous-arbre, quel que soit l'ordre des feuilles. C'est ce qui
   rend ce lot non destructif.
   ========================================================================== */
.theme-build360-2026{

  /* -- 2.1 Famille historique « socle » (styles.css / design-system-v2.css) - */
  --primary:var(--b360-primary);
  --primary-d:var(--b360-primary-hover);
  --primary-l:var(--b360-primary-soft);
  --accent:var(--b360-primary);
  --accent-l:var(--b360-primary-soft);

  --ink:var(--b360-text);
  --ink-2:var(--b360-text-strong);
  --muted:var(--b360-text-secondary);
  --muted-2:var(--b360-text-muted);

  --bg:var(--b360-bg);
  --surface:var(--b360-surface);
  --surface-2:var(--b360-surface-muted);
  --line:var(--b360-border);
  --line-2:var(--b360-divider);

  --sidebar:var(--b360-surface);
  --sidebar-2:var(--b360-surface-muted);
  --sidebar-ink:var(--b360-text-strong);
  --sidebar-active:var(--b360-primary);

  --ok:var(--b360-success);     --ok-l:var(--b360-success-soft);
  --warn:var(--b360-warning);   --warn-l:var(--b360-warning-soft);
  --danger:var(--b360-danger);  --danger-l:var(--b360-danger-soft);
  --info:var(--b360-info);      --info-l:var(--b360-info-soft);
  --purple:var(--b360-gray-500);--purple-l:var(--b360-gray-100);

  --radius:var(--b360-radius-control);
  --radius-sm:var(--b360-radius-field);
  --shadow:var(--b360-shadow-sm);
  --shadow-sm:var(--b360-shadow-sm);
  --shadow-lg:var(--b360-shadow-lg);
  --sb-w:var(--b360-sidebar-w);

  /* -- 2.2 Famille « blueprint » (theme-blueprint.css — feuille dominante) -- */
  --bp-paper:var(--b360-bg);
  --bp-paper-strong:var(--b360-surface);
  --bp-paper-soft:var(--b360-surface-muted);
  --bp-grid:var(--b360-border);
  --bp-line:var(--b360-border);
  --bp-ink:var(--b360-text);
  --bp-blue:var(--b360-primary);          /* le bleu blueprint devient le jaune */
  --bp-blue-hover:var(--b360-primary-hover);
  --bp-blue-soft:var(--b360-primary-soft);
  --bp-orange:var(--b360-primary);
  --bp-orange-hover:var(--b360-primary-hover);
  --bp-orange-soft:var(--b360-primary-soft);
  --bp-orange-ink:var(--b360-on-primary);
  --bp-muted:var(--b360-text-secondary);
  --bp-success:var(--b360-success);       --bp-success-soft:var(--b360-success-soft);
  --bp-warning:var(--b360-warning);       --bp-warning-soft:var(--b360-warning-soft);
  --bp-danger:var(--b360-danger);         --bp-danger-soft:var(--b360-danger-soft);
  --bp-font:var(--b360-font-ui);
  --bp-data:var(--b360-font-data);

  /* -- 2.3 Famille « cockpit terrain » (styles.css:716) ---------------------
     COLLISION DE NOMMAGE ASSUMÉE : ces quatre variables existaient déjà avec
     le préfixe --b360-. Elles ne sont PAS supprimées, seulement redirigées
     dans la portée du thème. Cf. THEME-001_LEGACY_CSS.md, conflit n°1.      */
  --b360-accent:var(--b360-primary);
  --b360-blue:var(--b360-info);
  --b360-soft:var(--b360-surface-muted);
  --b360-yellow:var(--b360-warning);

  /* -- 2.4 Famille « classic commerce » ------------------------------------ */
  --cc-canvas:var(--b360-bg);
  --cc-surface:var(--b360-surface);
  --cc-line:var(--b360-border);
  --cc-text:var(--b360-text);
  --cc-muted:var(--b360-text-secondary);
  --cc-blue:var(--b360-primary);
  --cc-orange:var(--b360-primary);
}


/* ============================================================================
   BLOC 3 — RÈGLES DE BASE (scopées, volontairement minimales)
   ----------------------------------------------------------------------------
   THEME-001 ne restyle aucun composant : c'est l'objet des lots suivants.
   Seules les fondations non ambiguës sont posées ici.
   ========================================================================== */
.theme-build360-2026{
  font-family:var(--b360-font-ui);
  font-size:var(--b360-size-body);
  font-weight:var(--b360-weight-body);
  line-height:var(--b360-lh-body);
  color:var(--b360-text);
  background-color:var(--b360-bg);
  /* le quadrillage bleu hérité de theme-blueprint.css n'appartient pas au
     nouveau thème : fond uni blanc cassé. */
  background-image:none;
}
.theme-build360-2026 :focus-visible{
  outline:var(--b360-focus-outline);
  outline-offset:var(--b360-focus-offset);
  border-radius:var(--b360-radius-field);
}
.theme-build360-2026 ::selection{
  background:var(--b360-primary-soft);
  color:var(--b360-text);
}
.theme-build360-2026 code,
.theme-build360-2026 kbd,
.theme-build360-2026 pre,
.theme-build360-2026 .num{
  font-family:var(--b360-font-data);
}

/* Accessibilité : aucune information portée par la seule couleur, et le jaune
   ne sert jamais de fond à du texte blanc. Garde-fou explicite. */
.theme-build360-2026 [style*="background:#FFB300"],
.theme-build360-2026 .b360-on-primary{ color:var(--b360-on-primary); }

@media (prefers-reduced-motion:reduce){
  .theme-build360-2026 *{ transition-duration:1ms !important; animation-duration:1ms !important; }
}


/* ============================================================================
   BLOC 4 — LANCEUR DE MODULES (DEPLOY-UI-001)
   ----------------------------------------------------------------------------
   Composants du nouvel accueil. Préfixe `b360-` : aucun nom de classe
   historique n'est réutilisé, donc aucune règle existante n'est recouverte.
   Toutes les valeurs passent par les tokens du bloc 1.
   Ces règles ne s'appliquent qu'à l'intérieur du lanceur, lui-même monté
   uniquement lorsque le drapeau `?ui=2026` est présent.
   ========================================================================== */

/* Largeur de contenu de la maquette (1240 px, centrée). `#app-content.content`
   plafonne à 1640 px : au-delà de 1240 la page s'étalait et perdait la
   composition du template. On borne ici, pas dans la feuille historique. */
.b360-home{ font-family:var(--b360-font-ui); color:var(--b360-text);
  max-width:var(--b360-content-max); margin:0 auto; }

/* Chiffres : Inter en chasse tabulaire. Écart assumé au §18 (Fira Code) —
   le zéro barré natif de Fira Code se lit « Ø » et a été refusé en recette.
   Retour arrière = remplacer `--b360-font-num` par `var(--b360-font-data)`. */
.b360-home{ --b360-font-num:var(--b360-font-ui); }
.b360-card__kpi,.b360-kpi__v,.b360-prio__v,.b360-compteurs b,.b360-pct{
  font-variant-numeric:tabular-nums;
}

/* -- en-tête -- */
.b360-home__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--b360-space-4);
  margin-bottom:var(--b360-space-6)}
.b360-home__hello{font-size:var(--b360-size-h1);font-weight:var(--b360-weight-h1);
  line-height:var(--b360-lh-h1);letter-spacing:var(--b360-tracking-tight);margin:0}
.b360-home__sub{margin:5px 0 0;font-size:13.5px;color:var(--b360-text-secondary)}
.b360-home__sub b{color:var(--b360-primary-text);font-weight:600}

/* -- grille : 2 / 3 / 4 colonnes, jamais plus -- */
.b360-grid{display:grid;gap:var(--b360-space-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){ .b360-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .b360-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ────────────────────────────────────────────────────────────────────────────
   MODULECARD — SOURCE UNIQUE (UI-CLEANUP-001)
   ----------------------------------------------------------------------------
   Ce composant était défini DEUX FOIS dans cette feuille : ici en `.b360-card`
   (spécificité 0-1-0) et plus bas en `.theme-build360-2026 .b360-card`
   (0-2-0). Le second gagnait systématiquement — corriger le premier restait
   sans effet à l'écran, ce qui a masqué un chevauchement texte/illustration
   pendant plusieurs passes de finition.
   Les deux blocs sont fusionnés ici, sous le préfixe de thème : les styles
   2026 restent confinés au thème, et plus aucune règle ne fonctionne « parce
   qu'elle en écrase une autre ».
   Trois valeurs venaient du bloc préfixé et sont conservées telles quelles
   pour garantir zéro différence visuelle :
     · ombre portée de l'illustration  0 8px 10px rgba(17,24,39,.10)
     · taille de police de la flèche   14px
     · KPI mobile                      margin-top: 16px
   Zones : titre 56 % · KPI et sous-texte 52 % · illustration 38 % à droite.
   Gouttière mesurée entre texte et image : 22 px.
   ──────────────────────────────────────────────────────────────────────── */
.theme-build360-2026 .b360-card{position:relative;display:flex;flex-direction:column;min-height:152px;
  padding:var(--b360-space-5);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-card);
  background:var(--b360-surface);box-shadow:var(--b360-shadow-card);
  text-align:left;overflow:hidden;width:100%;
  transition:transform var(--b360-transition),box-shadow var(--b360-transition),border-color var(--b360-transition)}
.theme-build360-2026 .b360-card:hover{transform:translateY(-2px);box-shadow:var(--b360-shadow-hover);
  border-color:var(--b360-border-strong)}
.theme-build360-2026 .b360-card:active{transform:translateY(0);box-shadow:var(--b360-shadow-card)}
.theme-build360-2026 .b360-card__t{position:relative;z-index:2;margin:0;max-width:56%;font-size:13px;font-weight:600;
  line-height:1.3;color:var(--b360-text-strong)}
.theme-build360-2026 .b360-card__kpi{position:relative;z-index:2;margin-top:auto;max-width:52%;
  font-family:var(--b360-font-num,var(--b360-font-data));
  font-size:var(--b360-size-kpi);font-weight:var(--b360-weight-kpi);line-height:var(--b360-lh-kpi);
  letter-spacing:var(--b360-tracking-kpi);color:var(--b360-text)}
/* deux lignes maximum : au-delà, on coupe proprement plutôt que de pousser le
   texte sous l'image ou de faire grandir la carte de façon irrégulière */
.theme-build360-2026 .b360-card__s{position:relative;z-index:2;margin-top:3px;max-width:52%;
  font-size:12px;font-weight:500;color:var(--b360-text-secondary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.theme-build360-2026 .b360-card__t + .b360-card__s{margin-top:auto;max-width:52%;line-height:1.45}
.theme-build360-2026 .b360-card__s--danger{color:var(--b360-danger);font-weight:600}
.theme-build360-2026 .b360-card__s--vide{color:var(--b360-text-muted)}
.theme-build360-2026 .b360-card__kpi--vide{color:var(--b360-border-strong)}
.theme-build360-2026 .b360-card__illu{position:absolute;right:8px;bottom:6px;width:38%;height:74%;z-index:1;
  object-fit:contain;object-position:right bottom;pointer-events:none;
  filter:drop-shadow(0 8px 10px rgba(17,24,39,.10))}
.theme-build360-2026 .b360-card__go{position:absolute;right:10px;bottom:10px;z-index:3;display:grid;place-items:center;
  width:28px;height:28px;border:1px solid var(--b360-border);border-radius:var(--b360-radius-pill);
  background:var(--b360-surface);box-shadow:var(--b360-shadow-card);
  font-size:14px;line-height:1;color:var(--b360-text-secondary);
  transition:border-color var(--b360-transition-fast),color var(--b360-transition-fast)}
.theme-build360-2026 .b360-card:hover .b360-card__go{border-color:var(--b360-primary);color:var(--b360-primary-text)}
/* états */
.theme-build360-2026 .b360-card--urgent{border-color:var(--b360-danger)}
.theme-build360-2026 .b360-card--alerte{border-color:var(--b360-primary)}
.theme-build360-2026 .b360-card--verrou{background:var(--b360-surface-muted);border-style:dashed;box-shadow:none;cursor:default}
.theme-build360-2026 .b360-card--verrou:hover{transform:none;box-shadow:none;border-color:var(--b360-border)}
.theme-build360-2026 .b360-card--verrou .b360-card__t{color:var(--b360-text-muted)}
.theme-build360-2026 .b360-card--verrou .b360-card__illu{filter:grayscale(1);opacity:.3}
.theme-build360-2026 .b360-card--verrou .b360-card__go{display:none}
.theme-build360-2026 .b360-lock{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  margin-top:auto;max-width:66%;padding:5px 10px;border-radius:var(--b360-radius-pill);
  background:var(--b360-primary-soft);color:var(--b360-primary-text);
  font-size:11.5px;font-weight:600;line-height:1.3}
.theme-build360-2026 .b360-card--verrou .b360-lock{margin-top:var(--b360-space-5)}

/* ModuleCard — paliers responsive, définis une seule fois */
@media (min-width:600px) and (max-width:1023px){
  .theme-build360-2026 .b360-card__illu{width:36%}
}

/* -- état vide global -- */
.b360-empty{grid-column:1/-1;padding:var(--b360-space-12) var(--b360-space-5);
  border:1px dashed var(--b360-border-strong);border-radius:var(--b360-radius-card);
  background:var(--b360-surface);text-align:center;color:var(--b360-text-secondary)}
.b360-empty b{display:block;margin-bottom:6px;font-size:15px;color:var(--b360-text)}

/* -- mobile -- */
@media (max-width:599px){
  /* En 2 colonnes la carte est étroite : on garde la même règle de non-
     recouvrement, avec une illustration réduite mais toujours visible.
     `margin-top` du KPI repris du bloc préfixé supprimé — valeur conservée. */
  .theme-build360-2026 .b360-card{min-height:126px;padding:var(--b360-space-3) var(--b360-space-4)}
  .theme-build360-2026 .b360-card__t{font-size:12px;max-width:58%}
  .theme-build360-2026 .b360-card__kpi{margin-top:var(--b360-space-4);font-size:23px;max-width:56%}
  .theme-build360-2026 .b360-card__s,
  .theme-build360-2026 .b360-card__t + .b360-card__s{font-size:11px;max-width:56%}
  .theme-build360-2026 .b360-card__illu{width:40%;height:64%;right:6px;bottom:4px}
  .theme-build360-2026 .b360-card__go{width:24px;height:24px;right:8px;bottom:8px;font-size:12px}
  .b360-home__hello{font-size:21px}
}
@media (max-width:430px){
  /* Sur très petit écran l'illustration reste visible mais cède la priorité au
     texte : jamais de recouvrement, même à 390 px. */
  .theme-build360-2026 .b360-card{min-height:120px}
  .theme-build360-2026 .b360-card__illu{width:38%}
  .theme-build360-2026 .b360-card__t,
  .theme-build360-2026 .b360-card__kpi,
  .theme-build360-2026 .b360-card__s,
  .theme-build360-2026 .b360-card__t + .b360-card__s{max-width:58%}
  .theme-build360-2026 .b360-card__kpi{font-size:22px}
}

/* ============================================================================
   BLOC 5 — SHELL APPLICATIF (THEME-003)
   ----------------------------------------------------------------------------
   Restylage du shell EXISTANT : aucun DOM dupliqué, aucune seconde navigation.
   Chaque règle cible les classes déjà produites par app.js et index.html.
   Portée : `.theme-build360-2026`, posée sur `#app` uniquement sous `?ui=2026`.
   Spécificité 0-3-0 minimum → l'emporte sur les feuilles historiques sans
   dépendre de l'ordre de chargement.
   ========================================================================== */

/* -- fond général -------------------------------------------------------- */
.theme-build360-2026{background:var(--b360-bg);background-image:none}
.theme-build360-2026 .main{background:var(--b360-bg)}
.theme-build360-2026 .content{background:transparent}

/* -- SIDEBAR ------------------------------------------------------------- */
.theme-build360-2026 .sidebar{
  width:var(--b360-sidebar-w);
  background:var(--b360-surface);
  border-right:1px solid var(--b360-border);
  box-shadow:none;
  color:var(--b360-text-strong);
}
.theme-build360-2026 .sidebar__brand{
  min-height:var(--b360-topbar-h);
  padding:0 var(--b360-space-5);
  background:var(--b360-surface);
  border-bottom:1px solid var(--b360-border);
}
.theme-build360-2026 .brand__logo,
.theme-build360-2026 .brand__logo--img{width:38px!important;height:38px!important;box-shadow:none!important}
.theme-build360-2026 .brand__title{color:var(--b360-text);font-size:17px;font-weight:700;letter-spacing:-.02em}
.theme-build360-2026 .brand__sub{color:var(--b360-text-muted);font-size:10.5px}
/* logo en signature complète : l'image porte déjà le mot-symbole, le bloc de
   texte de la marque devient redondant et disparaît. */
.theme-build360-2026 .sidebar__brand.b360-brand .brand__logo,
.theme-build360-2026 .sidebar__brand.b360-brand .brand__logo--img{
  width:138px!important;height:37px!important;
  object-fit:contain;background:transparent!important;border-radius:0!important;
}
.theme-build360-2026 .sidebar__brand.b360-brand .brand__name{display:none}

/* -- SÉLECTEUR DE PROJET (§1) --------------------------------------------
   Le <select> natif reste le contrôle : il est superposé, transparent, et
   conserve toute sa logique. Le visuel n'est qu'une peau — il n'existe donc
   qu'UN SEUL état de projet. */
.theme-build360-2026 .context-select--project{position:relative}
.theme-build360-2026 .context-select--project > span{display:none}
.theme-build360-2026 .context-select--project .select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;z-index:2;border:0;background:transparent;
}
.theme-build360-2026 .context-select--project .select:focus{box-shadow:none}
.theme-build360-2026 .context-select--project .select:focus + .b360-projet{
  border-color:var(--b360-primary);box-shadow:var(--b360-focus-ring);
}
.b360-projet{
  display:flex;align-items:center;gap:10px;
  min-height:48px;padding:5px var(--b360-space-3);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);
  background:var(--b360-surface);
  transition:border-color var(--b360-transition-fast),box-shadow var(--b360-transition-fast);
}
.b360-projet:hover{border-color:var(--b360-border-strong);box-shadow:var(--b360-shadow-card)}
.b360-projet__ico{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--b360-radius-field);
  background:var(--b360-primary-soft);color:var(--b360-primary-text);
}
.b360-projet__ico svg{width:17px;height:17px}
.b360-projet__txt{min-width:0;flex:1}
.b360-projet__nom{
  display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--b360-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.b360-projet__sub{display:block;font-size:11.5px;font-weight:400;color:var(--b360-text-secondary)}
.b360-projet__caret{flex:0 0 auto;color:var(--b360-text-muted)}
.b360-projet__caret svg{width:15px;height:15px;display:block}
.theme-build360-2026 .nav{padding:var(--b360-space-2) var(--b360-space-3) var(--b360-space-5)}
.theme-build360-2026 .nav__group{
  color:var(--b360-text-muted);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  padding:var(--b360-space-4) var(--b360-space-3) var(--b360-space-2);
}
.theme-build360-2026 .nav__item{
  min-height:38px;margin:1px 0;padding:0 var(--b360-space-3);
  border-radius:var(--b360-radius-control);
  color:var(--b360-text-strong);font-size:13.5px;font-weight:500;
  box-shadow:none;
}
.theme-build360-2026 .nav__item .nav__ico{color:var(--b360-text-muted)}
.theme-build360-2026 .nav__item:hover{background:var(--b360-gray-100);color:var(--b360-text)}
.theme-build360-2026 .nav__item:hover .nav__ico{color:var(--b360-text-strong)}
.theme-build360-2026 .nav__item.active{
  background:var(--b360-primary);
  color:var(--b360-on-primary);
  font-weight:600;
  box-shadow:none;
}
.theme-build360-2026 .nav__item.active .nav__ico{color:var(--b360-on-primary)}
.theme-build360-2026 .nav__item.active::before{display:none}
.theme-build360-2026 .nav__badge{background:var(--b360-gray-100);color:var(--b360-text-strong)}
.theme-build360-2026 .nav__item.active .nav__badge{background:rgba(17,24,39,.16);color:var(--b360-on-primary)}
.theme-build360-2026 .nav__more-toggle,
.theme-build360-2026 .nav__sub{
  color:var(--b360-text-secondary);border-radius:var(--b360-radius-control);font-weight:600;
}
.theme-build360-2026 .nav__more-toggle:hover,
.theme-build360-2026 .nav__sub:hover{background:var(--b360-gray-100);color:var(--b360-text)}

/* pied de sidebar — indicateur discret, jamais le rôle (§4) */
.theme-build360-2026 .sidebar__footer{
  background:var(--b360-surface);border-top:1px solid var(--b360-border);
  padding:var(--b360-space-4) var(--b360-space-5);
}
.theme-build360-2026 .env-pill{
  display:block!important;padding:0!important;border:0!important;
  background:transparent!important;color:var(--b360-text-strong)!important;
  font-size:12.5px!important;font-weight:600!important;text-align:left;
}
.theme-build360-2026 .env-pill__sub{
  display:block;margin-top:3px;font-size:11px;font-weight:400;color:var(--b360-text-muted);
}

/* -- TOPBAR -------------------------------------------------------------- */
.theme-build360-2026 .topbar{
  min-height:var(--b360-topbar-h);
  padding:var(--b360-space-3) var(--b360-space-6);
  background:var(--b360-surface);
  border-bottom:1px solid var(--b360-border);
  box-shadow:none;backdrop-filter:none;
}
.theme-build360-2026 .topbar__search input{
  min-height:var(--b360-tap-min);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);
  background:var(--b360-gray-100);color:var(--b360-text);font-size:13.5px;
}
.theme-build360-2026 .topbar__search input::placeholder{color:var(--b360-text-muted);font-weight:400}
.theme-build360-2026 .topbar__search input:focus{
  outline:none;border-color:var(--b360-primary);
  background:var(--b360-surface);box-shadow:var(--b360-focus-ring);
}
.theme-build360-2026 .icon-btn{
  min-width:var(--b360-tap-min);min-height:var(--b360-tap-min);
  border:1px solid transparent;border-radius:var(--b360-radius-control);
  background:transparent;color:var(--b360-text-strong);
}
.theme-build360-2026 .icon-btn:hover{
  background:var(--b360-gray-100);border-color:var(--b360-border);color:var(--b360-text);
}
.theme-build360-2026 .topbar .badge{
  background:var(--b360-danger);border:2px solid var(--b360-surface);color:#fff;font-weight:700;
}
.theme-build360-2026 .user{border-radius:var(--b360-radius-control);min-height:var(--b360-tap-min)}
.theme-build360-2026 .user:hover{background:var(--b360-gray-100)}
.theme-build360-2026 .user__avatar{
  border-radius:var(--b360-radius-pill);
  background:var(--b360-primary-soft)!important;color:var(--b360-primary-text);
  box-shadow:none!important;font-weight:700;
}
.theme-build360-2026 .user__name{color:var(--b360-text);font-size:13.5px;font-weight:600}
.theme-build360-2026 .user__role{color:var(--b360-text-secondary);font-size:11.5px;font-weight:400}
.theme-build360-2026 .user-menu{
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-card);
  background:var(--b360-surface);box-shadow:var(--b360-shadow-lg);
}
.theme-build360-2026 .user-menu__link{border-radius:var(--b360-radius-control);color:var(--b360-text)}
.theme-build360-2026 .user-menu__link:hover{background:var(--b360-gray-100)}

/* -- BARRE DE CONTEXTE / SÉLECTEUR DE PROJET ----------------------------- */
.theme-build360-2026 .context-bar{
  background:var(--b360-surface);border-bottom:1px solid var(--b360-border);
  backdrop-filter:none;padding:var(--b360-space-2) var(--b360-space-6);
}
/* §11 — HIÉRARCHIE DE LA BARRE DE CONTEXTE
   Aucun contrôle n'est supprimé : Offre, Société et Agence restent présents et
   fonctionnels. Ils passent simplement au second plan, et le sélecteur de
   projet — le vrai contrôle de contexte — passe en tête de ligne. */
.theme-build360-2026 .context-bar{display:flex;align-items:center;gap:var(--b360-space-3);flex-wrap:wrap}
.theme-build360-2026 .context-select--project{order:-1;flex:0 0 auto}
.theme-build360-2026 .context-select:not(.context-select--project){flex:0 1 auto;min-width:0}
.theme-build360-2026 .context-select > span,
.theme-build360-2026 .topbar__label{
  color:var(--b360-text-muted);font-size:10px;font-weight:600;letter-spacing:.05em;
}
/* sélecteurs secondaires : plus bas, plus gris, bordure au survol seulement */
.theme-build360-2026 .context-select:not(.context-select--project) .select{
  min-height:34px;font-size:12.5px;font-weight:500;
  color:var(--b360-text-secondary);
  background:var(--b360-surface-muted);border-color:transparent;
}
.theme-build360-2026 .context-select:not(.context-select--project) .select:hover{
  border-color:var(--b360-border);background:var(--b360-surface);color:var(--b360-text);
}
.theme-build360-2026 .context-select:not(.context-select--project) .select:focus{
  border-color:var(--b360-primary);background:var(--b360-surface);color:var(--b360-text);
}
.theme-build360-2026 .select{
  min-height:var(--b360-tap-min);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);
  background:var(--b360-surface);color:var(--b360-text);font-size:13.5px;
}
.theme-build360-2026 .select:focus{
  outline:none;border-color:var(--b360-primary);box-shadow:var(--b360-focus-ring);
}
/* le chantier actif doit rester le plus identifiable de la barre */
.theme-build360-2026 .context-select--project .select{
  border-color:var(--b360-primary);
  background:var(--b360-primary-subtle);
  font-weight:600;
}

/* -- BOUTONS ------------------------------------------------------------- */
.theme-build360-2026 .btn{
  min-height:var(--b360-tap-min);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);
  background:var(--b360-surface);background-image:none;
  color:var(--b360-text);font-size:13.5px;font-weight:600;box-shadow:none;
}
.theme-build360-2026 .btn:hover{
  background:var(--b360-surface-muted);border-color:var(--b360-border-strong);box-shadow:var(--b360-shadow-card);
}
.theme-build360-2026 .btn--primary,
.theme-build360-2026 .btn.primary{
  background:var(--b360-primary);background-image:none;
  border-color:var(--b360-primary);color:var(--b360-on-primary);
}
.theme-build360-2026 .btn--primary:hover,
.theme-build360-2026 .btn.primary:hover{
  background:var(--b360-primary-hover);border-color:var(--b360-primary-hover);
}
.theme-build360-2026 .btn--sm{min-height:36px;font-size:12.5px}

/* -- PIED DE PAGE -------------------------------------------------------- */
.theme-build360-2026 .appfoot{
  background:var(--b360-surface);border-top:1px solid var(--b360-border);color:var(--b360-text-secondary);
}
.theme-build360-2026 .appfoot__links a{color:var(--b360-text-secondary)}
.theme-build360-2026 .appfoot__links a:hover{color:var(--b360-primary-text)}

/* -- NAVIGATION MOBILE --------------------------------------------------- */
.theme-build360-2026 .mbar{
  background:var(--b360-surface);
  border-top:1px solid var(--b360-border);
  box-shadow:0 -4px 16px rgba(17,24,39,.06);
}
.theme-build360-2026 .mbar__i{
  min-height:var(--b360-tap-min);
  border-radius:var(--b360-radius-control);
  color:var(--b360-text-muted);font-weight:600;
}
.theme-build360-2026 .mbar__ic{color:inherit}
.theme-build360-2026 .mbar__i:hover,
.theme-build360-2026 .mbar__i.active{
  background:var(--b360-primary-subtle);color:var(--b360-primary-text);
}
.theme-build360-2026 .mfab{
  width:54px;height:54px;
  border:3px solid var(--b360-surface);border-radius:var(--b360-radius-pill);
  background:var(--b360-primary);background-image:none;
  color:var(--b360-on-primary);
  box-shadow:0 6px 18px rgba(255,179,0,.42);
}
.theme-build360-2026 .mfab:active{transform:scale(.93)}

/* -- ACTIONS DU HERO (§11-13) -------------------------------------------- */
.b360-home__actions{display:flex;gap:var(--b360-space-2);margin-left:auto}
@media (max-width:599px){
  .b360-home__actions{width:100%;margin-left:0}
  .b360-home__actions .b360-btn:first-child{flex:1}
}
.b360-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--b360-tap-min);padding:0 var(--b360-space-4);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);
  background:var(--b360-surface);color:var(--b360-text);
  font-family:var(--b360-font-ui);font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:border-color var(--b360-transition-fast),background var(--b360-transition-fast);
}
.b360-btn:hover{background:var(--b360-surface-muted);border-color:var(--b360-border-strong)}
.b360-btn--carre{width:var(--b360-tap-min);padding:0}

/* ============================================================================
   BLOC 6 — PAGE D'ACCUEIL 2026 (THEME-004 HOME)
   Sections : KPI · modules · priorités chantier · widgets.
   Aucune donnée inventée : le rendu reste beau sans chiffre.
   ========================================================================== */

/* -- rythme vertical entre sections --------------------------------------
   Les libellés majuscules gris étaient le principal signal « ERP » de la page.
   La maquette n'a pas d'oeil-de-boeuf : elle hiérarchise par le blanc et par
   un titre de section en casse normale (cf. `.widget h3`). */
.b360-section{margin-top:var(--b360-space-10)}
.b360-section__t{
  display:flex;align-items:baseline;gap:var(--b360-space-3);margin-bottom:var(--b360-space-4);
}
.b360-section__t h2{
  margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  color:var(--b360-text);
}
.b360-section__t i{display:none}
.b360-section__t small{margin-left:auto;font-size:11.5px;color:var(--b360-text-muted);font-weight:500}

/* -- KPI d'entête : même langage que les ModuleCard, jamais une bande ----- */
.b360-kpis{display:grid;gap:var(--b360-space-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .b360-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
.b360-kpi{
  position:relative;display:flex;flex-direction:column;min-height:132px;
  padding:var(--b360-space-5);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-card);
  background:var(--b360-surface);box-shadow:var(--b360-shadow-card);overflow:hidden;
  transition:transform var(--b360-transition),box-shadow var(--b360-transition);
}
.b360-kpi:hover{transform:translateY(-2px);box-shadow:var(--b360-shadow-hover)}
.b360-kpi__t{font-size:13px;font-weight:600;color:var(--b360-text-strong)}
.b360-kpi__v{
  margin-top:auto;font-family:var(--b360-font-num,var(--b360-font-data));
  font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--b360-text);
}
.b360-kpi__s{margin-top:3px;font-size:12px;font-weight:500;color:var(--b360-text-secondary)}
.b360-kpi__ico{
  position:absolute;right:var(--b360-space-5);top:var(--b360-space-5);
  display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--b360-radius-control);background:var(--b360-gray-100);color:var(--b360-text-secondary);
}
.b360-kpi__ico svg{width:19px;height:19px}
.b360-kpi--danger .b360-kpi__v{color:var(--b360-danger)}
.b360-kpi--danger .b360-kpi__ico{background:var(--b360-danger-soft);color:var(--b360-danger-text)}
.b360-kpi--warn .b360-kpi__ico{background:var(--b360-warning-soft);color:var(--b360-warning-text)}
.b360-kpi--ok .b360-kpi__ico{background:var(--b360-success-soft);color:var(--b360-success-text)}
.b360-kpi--vide .b360-kpi__v{color:var(--b360-border-strong)}

/* -- Priorités chantier : mini-cartes, sans liseré ----------------------- */
.b360-prios{display:grid;gap:var(--b360-space-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){ .b360-prios{grid-template-columns:repeat(4,minmax(0,1fr))} }
.b360-prio{
  display:flex;align-items:center;gap:var(--b360-space-4);
  padding:var(--b360-space-4);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-card);
  background:var(--b360-surface);box-shadow:var(--b360-shadow-card);
  transition:transform var(--b360-transition-fast),border-color var(--b360-transition-fast),box-shadow var(--b360-transition-fast);
}
.b360-prio:hover{transform:translateY(-2px);border-color:var(--b360-border-strong);box-shadow:var(--b360-shadow-hover)}
.b360-prio__ico{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border-radius:var(--b360-radius-control);background:var(--b360-gray-100);color:var(--b360-text-secondary);
}
.b360-prio__ico svg{width:19px;height:19px}
.b360-prio__c{min-width:0;flex:1}
.b360-prio__v{
  display:block;font-family:var(--b360-font-num,var(--b360-font-data));font-size:24px;font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--b360-text);
}
.b360-prio__l{display:block;font-size:12px;color:var(--b360-text-secondary)}
.b360-prio--danger .b360-prio__ico{background:var(--b360-danger-soft);color:var(--b360-danger-text)}
.b360-prio--danger .b360-prio__v{color:var(--b360-danger)}
.b360-prio--warn .b360-prio__ico{background:var(--b360-warning-soft);color:var(--b360-warning-text)}
.b360-prio--ok .b360-prio__ico{background:var(--b360-success-soft);color:var(--b360-success-text)}

/* -- Widgets ------------------------------------------------------------- */
.b360-widgets{display:grid;gap:var(--b360-space-4);grid-template-columns:1fr}
@media (min-width:760px){ .b360-widgets{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .b360-widgets{grid-template-columns:repeat(3,minmax(0,1fr))} }
.b360-panel{
  display:flex;flex-direction:column;padding:var(--b360-space-5);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-card);
  background:var(--b360-surface);box-shadow:var(--b360-shadow-card);
}
.b360-panel__t{display:flex;align-items:center;justify-content:space-between;gap:var(--b360-space-2);margin-bottom:var(--b360-space-4)}
.b360-panel__t h3{margin:0;font-size:14.5px;font-weight:600;color:var(--b360-text)}
.b360-ligne{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--b360-divider);
}
.b360-ligne:last-child{border-bottom:0;padding-bottom:0}
.b360-ligne__p{width:8px;height:8px;flex:0 0 auto;border-radius:var(--b360-radius-pill);background:var(--b360-border-strong)}
.b360-ligne__c{min-width:0;flex:1}
.b360-ligne__c b{display:block;font-size:12.5px;font-weight:600;color:var(--b360-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b360-ligne__c span{display:block;font-size:11.5px;color:var(--b360-text-secondary)}
.b360-chip{
  flex:0 0 auto;padding:3px 9px;border-radius:var(--b360-radius-pill);
  font-size:11px;font-weight:600;background:var(--b360-gray-100);color:var(--b360-text-strong);
}
.b360-chip--danger{background:var(--b360-danger-soft);color:var(--b360-danger-text)}
.b360-chip--ok{background:var(--b360-success-soft);color:var(--b360-success-text)}
.b360-chip--warn{background:var(--b360-warning-soft);color:var(--b360-warning-text)}
.b360-pct{font-size:36px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--b360-success)}
.b360-barre{height:7px;margin:var(--b360-space-3) 0;border-radius:var(--b360-radius-pill);
  background:var(--b360-gray-100);overflow:hidden}
.b360-barre i{display:block;height:100%;border-radius:var(--b360-radius-pill);background:var(--b360-success)}
.b360-compteurs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--b360-space-2);margin-top:var(--b360-space-3)}
.b360-compteurs div{padding:9px 10px;border-radius:var(--b360-radius-field);background:var(--b360-surface-muted);text-align:center}
.b360-compteurs b{display:block;font-family:var(--b360-font-num,var(--b360-font-data));font-size:16px;font-weight:700}
.b360-compteurs small{font-size:10.5px;color:var(--b360-text-secondary)}

/* -- Fil d'Ariane et chips de contexte : présents mais discrets (§11-12) -- */
.theme-build360-2026 .route-context{
  margin-bottom:var(--b360-space-4);padding:0;background:transparent;border:0;box-shadow:none;
}
.theme-build360-2026 .route-context__trail,
.theme-build360-2026 .breadcrumb,
.theme-build360-2026 .af-trail{
  background:transparent;box-shadow:none;padding:0;
  font-size:11px;color:var(--b360-text-muted);
}
.theme-build360-2026 .af-trail__seg,
.theme-build360-2026 .sp-bc__item b{color:var(--b360-text-muted);font-size:11px;font-weight:500}
.theme-build360-2026 .af-trail__sep,
.theme-build360-2026 .sp-bc__sep{color:var(--b360-border-strong)}
.theme-build360-2026 .tag,
.theme-build360-2026 .chip,
.theme-build360-2026 .af-action{
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);
  background:var(--b360-surface);color:var(--b360-text-strong);
  font-family:var(--b360-font-ui);font-size:11.5px;font-weight:600;
}
.theme-build360-2026 .af-action.active,
.theme-build360-2026 .af-action:hover{
  background:var(--b360-primary-subtle);border-color:var(--b360-primary);color:var(--b360-primary-text);
}

/* -- Guide : conservé, mais il ne domine plus la page (§15) ---------------
   ATTENTION À LA PORTÉE — `#b360GuideRoot` est monté sous <body>, hors de
   `#app`. Les sélecteurs en `.theme-build360-2026 …` ne l'atteignaient donc
   jamais : les règles ci-dessous étaient mortes. Le crochet `.b360-guide--2026`
   est posé par build360-home.js, uniquement sous `?ui=2026`. */
.b360-guide--2026 .b360-guide-panel{
  max-width:340px!important;
  border:1px solid var(--b360-border)!important;
  border-radius:var(--b360-radius-card)!important;
  box-shadow:var(--b360-shadow-lg)!important;
  font-family:var(--b360-font-ui)!important;
}
/* Le lanceur du guide était une pastille orange saturée qui recouvrait la
   dernière rangée de cartes. On conserve la fonction et la position gérées par
   assistant.js — on neutralise seulement sa couleur et son encombrement. */
.b360-guide--2026 .b360-guide-launcher{
  font-family:var(--b360-font-ui)!important;
  border-radius:var(--b360-radius-pill)!important;
  box-shadow:var(--b360-shadow-md)!important;
  background:var(--b360-surface)!important;
  border:1px solid var(--b360-border)!important;
  color:var(--b360-text-strong)!important;
  font-size:12.5px!important;font-weight:600!important;
  padding:9px 14px!important;
  opacity:.94;
}
.b360-guide--2026 .b360-guide-launcher:hover{
  opacity:1;border-color:var(--b360-primary)!important;color:var(--b360-primary-text)!important;
}
/* seule la pastille d'icône reste jaune ; le libellé revient à l'encre */
.b360-guide--2026 .b360-guide-launcher > :first-child{
  background:var(--b360-primary)!important;color:var(--b360-on-primary)!important;
  border-radius:var(--b360-radius-pill)!important;
}
.b360-guide--2026 .b360-guide-launcher > :first-child ~ *{
  background:transparent!important;color:inherit!important;
}
/* The guide is available at all times, but its launcher stays a single
   44 px control so it cannot visually compete with the module grid. */
.b360-guide--2026 .b360-guide-launcher{
  width:44px;min-width:44px;height:44px;min-height:44px;padding:0!important;
  right:var(--b360-space-4)!important;bottom:var(--b360-space-4)!important;
}
.b360-guide--2026 .b360-guide-launcher b{display:none!important}
/* Sur mobile le guide ne doit jamais recouvrir la grille ni la barre basse.
   Son ouverture reste pilotée par assistant.js — on ne force aucun état,
   on borne seulement son encombrement. */
@media (max-width:767px){
  .b360-guide--2026 .b360-guide-panel{
    max-width:calc(100vw - 24px)!important;
    max-height:70vh!important;overflow:auto!important;
    bottom:96px!important;
  }
  /* le lanceur remonte au-dessus de la barre basse et se réduit à l'icône */
  .b360-guide--2026 .b360-guide-launcher{
    bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;
    padding:8px 12px!important;font-size:12px!important;
  }
}

/* ============================================================================
   BLOC 7 — NAVIGATION DU BACKOFFICE ÉDITEUR (PLATFORM-002 P1)
   Deux niveaux : familles puis écrans. Portée `.sa-nav` uniquement — aucune
   règle ne fuit vers l'espace client. Les `.subtabs` historiques restent
   intacts partout ailleurs dans l'application.
   ========================================================================== */
.sa-nav{margin-bottom:var(--b360-space-5)}
.sa-nav__fam{
  display:flex;flex-wrap:wrap;gap:var(--b360-space-2);
  padding-bottom:var(--b360-space-3);
  border-bottom:1px solid var(--b360-border);
}
.sa-nav__fam .sa-fam{
  display:inline-flex;align-items:center;gap:7px;
  min-height:var(--b360-tap-min);padding:0 var(--b360-space-4);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-pill);
  background:var(--b360-surface);color:var(--b360-text-secondary);
  font-family:var(--b360-font-ui);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background var(--b360-transition-fast),border-color var(--b360-transition-fast),color var(--b360-transition-fast);
}
.sa-nav__fam .sa-fam:hover{border-color:var(--b360-border-strong);color:var(--b360-text)}
.sa-nav__fam .sa-fam.active{
  background:var(--b360-primary);border-color:var(--b360-primary);color:var(--b360-on-primary);
}
.sa-fam__n{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--b360-radius-pill);background:var(--b360-gray-100);
  color:var(--b360-text-secondary);font-size:11px;font-weight:700;
}
.sa-fam.active .sa-fam__n{background:rgba(17,24,39,.14);color:var(--b360-text)}
.sa-nav__sub{
  display:flex;flex-wrap:wrap;gap:var(--b360-space-1);
  margin-top:var(--b360-space-3);
}
.sa-nav__sub button{
  min-height:38px;padding:0 var(--b360-space-3);
  border:0;border-radius:var(--b360-radius-control);
  background:transparent;color:var(--b360-text-secondary);
  font-family:var(--b360-font-ui);font-size:13px;font-weight:600;cursor:pointer;
}
.sa-nav__sub button:hover{background:var(--b360-surface-muted);color:var(--b360-text)}
.sa-nav__sub button.active{background:var(--b360-primary-soft);color:var(--b360-primary-text)}
/* Tablette et mobile : les familles défilent, les écrans passent à la ligne.
   Plus jamais une barre unique de 22 onglets. */
@media (max-width:767px){
  .sa-nav__fam{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sa-nav__fam::-webkit-scrollbar{display:none}
  .sa-nav__fam .sa-fam{flex:0 0 auto;padding:0 var(--b360-space-3);font-size:13px}
  .sa-nav__sub button{min-height:var(--b360-tap-min)}
}

/* ============================================================================
   BLOC 8 — ÉCRAN ENTREPRISES DU BACKOFFICE (PLATFORM-002 P2A)
   Charte 2026, portée `.sa-ent-*` / `.sa-tree__*` uniquement.
   ========================================================================== */
.sa-ent-filtres{display:flex;flex-wrap:wrap;gap:var(--b360-space-2);align-items:center}
.sa-ent-search{
  flex:1 1 260px;min-width:200px;min-height:var(--b360-tap-min);
  padding:0 var(--b360-space-3);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);
  background:var(--b360-surface);color:var(--b360-text);
  font-family:var(--b360-font-ui);font-size:13.5px;
}
.sa-ent-search:focus{outline:none;border-color:var(--b360-primary);box-shadow:var(--b360-focus-ring)}
.sa-ent-select{flex:0 0 auto;min-height:var(--b360-tap-min);font-size:13px}
.sa-ent-tbl th{white-space:nowrap}
.sa-ent-row{cursor:pointer}
.sa-ent-row:hover{background:var(--b360-primary-subtle)}
/* « N/A » doit se voir comme une absence, pas se confondre avec une valeur */
.sa-na{color:var(--b360-text-muted);font-style:italic}
.sa-ent-pager{margin-top:var(--b360-space-3)}
.sa-pager{
  display:flex;align-items:center;justify-content:center;gap:var(--b360-space-4);
  padding:var(--b360-space-3);
  border:1px solid var(--b360-border);border-radius:var(--b360-radius-card);
  background:var(--b360-surface);
}
.sa-ent-head{display:flex;align-items:center;gap:var(--b360-space-3);margin-bottom:var(--b360-space-4)}
.sa-ent-title{margin:0;font-size:var(--b360-size-h2);font-weight:700;letter-spacing:-.02em}
/* arbre Entreprise → Agence → Projet */
.sa-tree__ag{padding:var(--b360-space-3) 0;border-bottom:1px solid var(--b360-divider)}
.sa-tree__ag:last-child{border-bottom:0}
.sa-tree__agh{font-size:14px}
.sa-tree__pj{margin:6px 0 0;padding-left:var(--b360-space-6);list-style:none}
.sa-tree__pj li{
  position:relative;padding:4px 0 4px var(--b360-space-4);font-size:13px;
}
.sa-tree__pj li::before{
  content:"";position:absolute;left:0;top:14px;width:10px;height:1px;background:var(--b360-border-strong);
}
.sa-tree__vide{padding-left:var(--b360-space-6);color:var(--b360-text-muted)}
.sa-mods{display:flex;flex-wrap:wrap;gap:6px}
.sa-json{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:767px){
  .sa-ent-filtres{flex-direction:column;align-items:stretch}
  .sa-ent-select,.sa-ent-search{width:100%}
  .sa-pager{flex-direction:column;gap:var(--b360-space-2)}
  .sa-ent-title{font-size:17px}
}

/* -- bandeau de contrôle du drapeau ?ui=2026 (§16 : présent, mais discret) -- */
.b360-flag{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b360-space-3);
  margin-bottom:var(--b360-space-5);padding:0 0 var(--b360-space-3);
  border:0;border-bottom:1px solid var(--b360-border);border-radius:0;
  background:transparent;font-size:11.5px;color:var(--b360-text-muted)}
.b360-flag b{padding:2px 7px;border-radius:var(--b360-radius-pill);
  background:var(--b360-primary-soft);color:var(--b360-primary-text);
  font-size:10px;font-weight:700;letter-spacing:.05em}
.b360-flag code{font-family:var(--b360-font-data);font-size:10.5px;color:var(--b360-text-secondary)}
.b360-flag a{margin-left:auto;font-weight:600;color:var(--b360-text-secondary);text-decoration:none;
  border-bottom:1px solid var(--b360-border-strong)}
.b360-flag a:hover{color:var(--b360-primary-text);border-bottom-color:var(--b360-primary)}

/* ============================================================================
   THEME-005 - REPRISE FIDELE DE LA MAQUETTE 2026
   ----------------------------------------------------------------------------
   This final, scoped layer mirrors MAQUETTE_UX_2026 dimensions over the real
   application shell. Existing routes, selectors and data controls remain the
   source of truth; only their presentation changes under ?ui=2026.
   ========================================================================== */

/* -- Shell desktop -------------------------------------------------------- */
.theme-build360-2026 .main{
  margin-left:var(--b360-sidebar-w);min-width:0;max-width:none;background:var(--b360-bg);
}
.theme-build360-2026 #app-content.content{
  width:100%;max-width:none;margin:0;
  padding:var(--b360-space-8) var(--b360-space-6) var(--b360-space-16);
  background:transparent;
}
.theme-build360-2026 .b360-home{
  max-width:var(--b360-content-max);margin:0 auto;
  --b360-font-num:var(--b360-font-data);
}

/* UI-CLEANUP-001 — le bloc ModuleCard qui se trouvait ici a été FUSIONNÉ avec
   sa définition d'origine, plus haut dans cette feuille. Il n'existe désormais
   qu'une seule source de vérité pour ce composant. Ne pas le redéclarer ici. */

/* -- Sidebar -------------------------------------------------------------- */
.theme-build360-2026 .sidebar{
  width:var(--b360-sidebar-w);padding:var(--b360-space-3);z-index:40;
  background:var(--b360-surface);border-right:1px solid var(--b360-border);box-shadow:none;
}
.theme-build360-2026 .sidebar__brand{
  height:var(--b360-topbar-h);min-height:var(--b360-topbar-h);padding:0 var(--b360-space-2);
  border-bottom:0;background:transparent;
}
.theme-build360-2026 .sidebar__brand.b360-brand .brand__logo,
.theme-build360-2026 .sidebar__brand.b360-brand .brand__logo--img{width:116px!important;height:auto!important}
.theme-build360-2026 .sidebar__close{display:none}
.theme-build360-2026 .nav{margin-top:var(--b360-space-1);padding:0;gap:2px}
.theme-build360-2026 .nav__item{min-height:38px;margin:0;padding:0 var(--b360-space-3);border-radius:var(--b360-radius-control)}
.theme-build360-2026 .sidebar__footer{margin-top:var(--b360-space-3);padding:var(--b360-space-4) var(--b360-space-2) var(--b360-space-2)}

/* -- Desktop / tablet top bar -------------------------------------------- */
.theme-build360-2026 .topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--b360-space-4);
  min-height:var(--b360-topbar-h);padding:var(--b360-space-3) var(--b360-space-6);
  background:rgba(255,255,255,.94);border-bottom:1px solid var(--b360-border);
  box-shadow:none;backdrop-filter:blur(10px);
}
.theme-build360-2026 #sidebarToggle{display:none}
.theme-build360-2026 .b360-mobile-brand{display:none}
.theme-build360-2026 .context-toggle{display:grid}
.theme-build360-2026 .topbar .b360-topbar-project-host{
  display:block;position:relative;flex:0 1 280px;min-width:200px;order:0;margin:0;
}
.theme-build360-2026 .topbar__search{flex:1;max-width:560px;min-width:0}
.theme-build360-2026 .topbar__actions{margin-left:auto;min-width:0}
.theme-build360-2026 .context-bar{display:none;padding:var(--b360-space-2) var(--b360-space-6)}
.theme-build360-2026 .context-bar.is-open{display:flex}
.theme-build360-2026 .context-bar .context-select--project{display:none}

/* -- Home composition ----------------------------------------------------- */
.theme-build360-2026 .b360-home__head{margin-bottom:var(--b360-space-6)}
.theme-build360-2026 .b360-home__hello{font-size:28px;font-weight:700;letter-spacing:-.02em}
.theme-build360-2026 .b360-home__sub{font-size:13.5px}
.theme-build360-2026 .b360-section{margin-top:var(--b360-space-6)}
.theme-build360-2026 .b360-kpi__v,
.theme-build360-2026 .b360-prio__v,
.theme-build360-2026 .b360-compteurs b,
.theme-build360-2026 .b360-pct{font-family:var(--b360-font-data)}
.theme-build360-2026 .b360-banner{
  position:relative;min-height:140px;margin-top:var(--b360-space-6);overflow:hidden;
  border-radius:var(--b360-radius-card);background:var(--b360-text);color:var(--b360-text-inverse);
}
.theme-build360-2026 .b360-banner img{display:block;width:100%;height:100%;object-fit:cover;opacity:.55}
.theme-build360-2026 .b360-banner__copy{position:absolute;top:var(--b360-space-5);left:var(--b360-space-6);z-index:2}
.theme-build360-2026 .b360-banner__copy h2{margin:0 0 var(--b360-space-3);font-size:22px;font-weight:600;color:var(--b360-text-inverse)}
.theme-build360-2026 .b360-btn--primary{background:var(--b360-primary);border-color:var(--b360-primary);color:var(--b360-on-primary);text-decoration:none}
.theme-build360-2026 .b360-btn--primary:hover{background:var(--b360-primary-hover);border-color:var(--b360-primary-hover);color:var(--b360-on-primary)}

/* -- Secondary context controls, only inside the existing profile menu --- */
.theme-build360-2026 .b360-mobile-context-controls{display:none}

/* -- Tablet: real 2026 drawer, three-card grid --------------------------- */
@media (max-width:1023px){
  .theme-build360-2026 .sidebar{transform:translateX(-100%);box-shadow:var(--b360-shadow-lg)}
  .theme-build360-2026 .sidebar.open{transform:translateX(0)}
  .theme-build360-2026 .sidebar__close{display:grid}
  .theme-build360-2026 .main{margin-left:0}
  .theme-build360-2026 #sidebarToggle{display:grid}
  .theme-build360-2026 .context-toggle{display:none!important}
  .theme-build360-2026 .topbar{padding:var(--b360-space-3) var(--b360-space-5);gap:var(--b360-space-3)}
  .theme-build360-2026 .topbar__search{display:block!important;max-width:none}
  .theme-build360-2026 #app-content.content{padding:var(--b360-space-6) var(--b360-space-5) var(--b360-space-12)}
  /* .b360-card__illu à ce palier : déclaré une seule fois, plus haut. */
  .theme-build360-2026 .b360-widgets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-build360-2026 .b360-mobile-context-controls{
    display:grid;gap:var(--b360-space-2);margin-top:var(--b360-space-2);padding-top:var(--b360-space-3);
    border-top:1px solid var(--b360-border);
  }
  .theme-build360-2026 .b360-mobile-context-controls__t{
    color:var(--b360-text-muted);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  }
  .theme-build360-2026 .b360-mobile-context-controls .context-select{display:grid;gap:4px}
  .theme-build360-2026 .b360-mobile-context-controls .context-select > span{
    color:var(--b360-text-muted);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  }
  .theme-build360-2026 .b360-mobile-context-controls .select{width:100%;min-width:0}
}

/* -- Mobile chrome from the approved template ---------------------------- */
@media (max-width:767px){
  .theme-build360-2026 .topbar{
    min-height:58px;padding:0 var(--b360-space-4);gap:var(--b360-space-3);
    overflow:visible;backdrop-filter:none;
  }
  .theme-build360-2026 #sidebarToggle{display:grid;flex:0 0 var(--b360-tap-min)}
  .theme-build360-2026 .b360-mobile-brand{display:block;width:94px;height:auto;flex:0 0 auto}
  .theme-build360-2026 .b360-mobile-brand--icon{width:34px;height:34px}
  .theme-build360-2026 .context-toggle,
  .theme-build360-2026 .topbar__search{display:none!important}
  .theme-build360-2026 .topbar__actions{margin-left:auto;gap:var(--b360-space-1)}
  .theme-build360-2026 .topbar__actions .icon-btn{display:grid!important;min-width:var(--b360-tap-min);min-height:var(--b360-tap-min)}
  .theme-build360-2026 .topbar__user-menu{display:flex!important;min-width:var(--b360-tap-min);padding:3px}
  .theme-build360-2026 .topbar__user-menu .user__info{display:none}
  .theme-build360-2026 .topbar .b360-topbar-project-host{
    position:absolute;top:calc(100% + var(--b360-space-3));left:var(--b360-space-4);right:var(--b360-space-4);
    display:block;min-width:0;z-index:31;
  }
  .theme-build360-2026 .context-bar{display:none!important}
  .theme-build360-2026 #app-content.content{
    padding:96px var(--b360-space-4) calc(128px + env(safe-area-inset-bottom,0px));
  }
  .theme-build360-2026 .b360-home__head{align-items:flex-start;flex-direction:column;gap:var(--b360-space-3);margin-bottom:var(--b360-space-5)}
  .theme-build360-2026 .b360-home__hello{font-size:21px}
  .theme-build360-2026 .b360-home__actions{width:100%;margin-left:0}
  .theme-build360-2026 .b360-home__actions .b360-btn:first-child{flex:1}
  .theme-build360-2026 .b360-widgets{grid-template-columns:1fr}
  .theme-build360-2026 .b360-banner{display:none}
  .theme-build360-2026 .b360-mobile-context-controls{
    display:grid;gap:var(--b360-space-2);margin-top:var(--b360-space-2);padding-top:var(--b360-space-3);
    border-top:1px solid var(--b360-border);
  }
  .theme-build360-2026 .b360-mobile-context-controls__t{
    color:var(--b360-text-muted);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  }
  .theme-build360-2026 .b360-mobile-context-controls .context-select{display:grid;gap:4px}
  .theme-build360-2026 .b360-mobile-context-controls .context-select > span{
    color:var(--b360-text-muted);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  }
  .theme-build360-2026 .b360-mobile-context-controls .select{width:100%;min-width:0}
  .b360-guide--2026 .b360-guide-launcher{
    right:var(--b360-space-3)!important;bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;
    width:44px;min-width:44px;height:44px;min-height:44px;padding:0!important;
  }
  .b360-guide--2026 .b360-guide-launcher b{display:none!important}
}

/* The bottom bar lives outside #app in the historical markup. Its unique
   class is assigned only by build360-home.js while ?ui=2026 is active. */
.mbar.b360-mobile-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none!important;
  grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:0;
  padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--b360-surface);border-top:1px solid var(--b360-border);
  box-shadow:0 -4px 16px rgba(17,24,39,.06);
}
.b360-mobile-nav__item,
.b360-mobile-nav__fab{
  min-height:var(--b360-tap-min);border:0;background:transparent;color:var(--b360-text-muted);
  font-family:var(--b360-font-ui);font-size:10px;font-weight:600;text-decoration:none;cursor:pointer;
}
.b360-mobile-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.b360-mobile-nav__item svg{width:20px;height:20px}
.b360-mobile-nav__item.active{color:var(--b360-primary-text)}
.b360-mobile-nav__fab{
  width:54px;height:54px;min-height:54px;margin:0 auto 4px;border:3px solid var(--b360-surface);
  border-radius:var(--b360-radius-pill);background:var(--b360-primary);color:var(--b360-on-primary);
  box-shadow:0 6px 18px rgba(255,179,0,.42);font-size:28px;line-height:1;transition:transform .14s;
}
.b360-mobile-nav__fab:active{transform:scale(.93)}
.b360-mobile-nav__fab:disabled{opacity:.45;cursor:not-allowed}
.b360-legacy-fab-hidden{display:none!important}
@media (max-width:767px){.mbar.b360-mobile-nav{display:grid!important}}

/* -- Small mobile cards: exact two-column proportions -------------------- */
@media (max-width:599px){
  .theme-build360-2026 .b360-grid{gap:var(--b360-space-3)}
  /* UI-CLEANUP-001 — les règles ModuleCard de ce palier ont été fusionnées
     avec la définition unique du composant, plus haut dans cette feuille.
     Ne rien redéclarer ici. */
}

/* -- Quick actions: permission-filtered controls mounted by the 2026 JS -- */
.b360-quick-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;
  padding:var(--b360-space-4);background:rgba(17,24,39,.32);
}
.b360-quick-sheet{
  width:min(560px,100%);padding:var(--b360-space-5);border:1px solid var(--b360-border);
  border-radius:var(--b360-radius-sheet);background:var(--b360-surface);box-shadow:var(--b360-shadow-lg);
}
.b360-quick-sheet header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--b360-space-4);margin-bottom:var(--b360-space-4)}
.b360-quick-sheet header span{display:block;color:var(--b360-text-muted);font-size:10px;font-weight:700;letter-spacing:.07em}
.b360-quick-sheet h2{margin:3px 0 0;color:var(--b360-text);font:600 20px/1.28 var(--b360-font-ui)}
.b360-quick-close{width:var(--b360-tap-min);height:var(--b360-tap-min);border:1px solid var(--b360-border);border-radius:var(--b360-radius-control);background:var(--b360-surface);color:var(--b360-text);font-size:24px;line-height:1;cursor:pointer}
.b360-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--b360-space-3)}
.b360-quick-grid button{
  display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;align-items:center;min-height:74px;
  padding:10px;border:1px solid var(--b360-border);border-radius:var(--b360-radius-card);background:var(--b360-surface);
  color:var(--b360-text);text-align:left;cursor:pointer;
}
.b360-quick-grid button:hover{border-color:var(--b360-primary);background:var(--b360-primary-subtle)}
.b360-quick-grid button > span{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--b360-radius-field);background:var(--b360-gray-100);color:var(--b360-primary-text)}
.b360-quick-grid svg{width:19px;height:19px}
.b360-quick-grid b{font:600 13px/1.25 var(--b360-font-ui)}
.b360-quick-grid small{grid-column:2;color:var(--b360-text-secondary);font:400 11px/1.25 var(--b360-font-ui)}
@media (max-width:430px){.b360-quick-overlay{padding:0}.b360-quick-sheet{border-radius:var(--b360-radius-sheet) var(--b360-radius-sheet) 0 0}.b360-quick-grid{gap:var(--b360-space-2)}}